`
modun
  • 浏览: 150424 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

获得一个不能预知高度的DIV的高度

阅读更多
通过元素的clientHeight属性能够得到元素的高度,如:
var height = element.clientHeight;

这种做法的局限:
1. 如果元素的display属性设置为none, 那么得到的结果为0
2. 在safari浏览器中,需要使用:element.offsetHeight得到实际高度,这是safari浏览器的bug

下面是Prototype提供的方法,能够兼容各种浏览器,同时在元素隐藏的情况下也能正确得到元素尺寸,供参考:
getDimensions: function(element) {
    element = $(element);
    var display = $(element).getStyle('display');
    if (display != 'none' && display != null) // Safari bug
      return {width: element.offsetWidth, height: element.offsetHeight};

    // All *Width and *Height properties give 0 on elements with display none,
    // so enable the element temporarily
    var els = element.style;
    var originalVisibility = els.visibility;
    var originalPosition = els.position;
    var originalDisplay = els.display;
    els.visibility = 'hidden';
    els.position = 'absolute';
    els.display = 'block';
    var originalWidth = element.clientWidth;
    var originalHeight = element.clientHeight;
    els.display = originalDisplay;
    els.position = originalPosition;
    els.visibility = originalVisibility;
    return {width: originalWidth, height: originalHeight};
  }

 

分享到:
评论

相关推荐

    DIV设置了固定宽高出现文字(文本)的不能自动换行

    由于英文单词之间默认是没有空格的,当一个很长的英文单词被放入一个宽度固定且不足以容纳它的DIV容器中时,浏览器会把它视为一个连续的长字符串,而不是分开的多个单词。因此,浏览器不会主动将这部分文本换行显示...

    jquery ui进度条百分比注册页面

    而不确定性进度条通常是一个连续移动的条纹,表示正在进行但无法预知完成时间的任务。考虑到描述中提到的是“百分比”,我们可以推测这里使用的是确定性进度条。 实现这个功能的关键步骤包括: 1. 引入jQuery和...

    瀑布流效果

    因为页面加载时可能无法预知所有内容的高度,所以当新的元素加载进来时,JavaScript会计算这些元素的高度,并调整它们的位置,确保每一列始终保持相同的顶部对齐。在"淘宝模板"这个案例中,可能是通过监听滚动事件,...

    基于jQuery实现的水平和垂直居中的div窗口

    然而,当div的尺寸不固定或者无法预知时,使用上述CSS方法就变得不够灵活,此时可以借助jQuery来实现更加动态的居中效果。jQuery是一个快速、小巧且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画和...

    IE和FIREFOX下CSS的区别与解决方法第1/2页

    另一个常见的问题是嵌套`DIV`的高度问题。当内部`DIV`的内容超出外部`DIV`的高度时,某些浏览器可能不会自动调整外部`DIV`的高度。例如: ```html <div id="parent"> <div id="content"></div> </div> ``` - **IE...

    jquery带进度条提示焦点图.zip

    进度条的设计不仅美观,还能帮助用户预知下一次变化,避免突然的图片切换带来的不适应感。 jQuery库是这个特效的核心,它是一个轻量级、高性能的JavaScript库,提供了丰富的DOM操作、事件处理、动画效果以及Ajax...

    JS使用canvas中的measureText方法测量字体宽度示例

    在使用measureText方法之前,我们需要创建一个Canvas元素,并通过getContext方法获得2D渲染上下文。接下来,就可以设置文本的字体样式,包括字体的大小、字体类型等,这对测量结果的准确性有直接影响。比如在示例...

    CSS学习笔记

    **注意**:ID不允许重复使用,如果在页面中出现重复的ID,可能会导致不可预知的结果。 #### 二、选择器的声明 ##### 1. 集体声明 可以同时对多个选择器应用相同的样式规则,这种方式称为集体声明。例如: ```css ...

    逆战班月总结

    2. 给父元素设置固定高度:适用于高度可预知的情况。 3. 使用空的`div`并设置`clear:both`:简单,但增加了额外的HTML元素。 【CSS样式表优先级计算】 CSS优先级按以下顺序递增: 1. 浏览器默认样式(最低) 2. ...

Global site tag (gtag.js) - Google Analytics