通过元素的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容器中时,浏览器会把它视为一个连续的长字符串,而不是分开的多个单词。因此,浏览器不会主动将这部分文本换行显示...
而不确定性进度条通常是一个连续移动的条纹,表示正在进行但无法预知完成时间的任务。考虑到描述中提到的是“百分比”,我们可以推测这里使用的是确定性进度条。 实现这个功能的关键步骤包括: 1. 引入jQuery和...
因为页面加载时可能无法预知所有内容的高度,所以当新的元素加载进来时,JavaScript会计算这些元素的高度,并调整它们的位置,确保每一列始终保持相同的顶部对齐。在"淘宝模板"这个案例中,可能是通过监听滚动事件,...
然而,当div的尺寸不固定或者无法预知时,使用上述CSS方法就变得不够灵活,此时可以借助jQuery来实现更加动态的居中效果。jQuery是一个快速、小巧且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画和...
另一个常见的问题是嵌套`DIV`的高度问题。当内部`DIV`的内容超出外部`DIV`的高度时,某些浏览器可能不会自动调整外部`DIV`的高度。例如: ```html <div id="parent"> <div id="content"></div> </div> ``` - **IE...
进度条的设计不仅美观,还能帮助用户预知下一次变化,避免突然的图片切换带来的不适应感。 jQuery库是这个特效的核心,它是一个轻量级、高性能的JavaScript库,提供了丰富的DOM操作、事件处理、动画效果以及Ajax...
在使用measureText方法之前,我们需要创建一个Canvas元素,并通过getContext方法获得2D渲染上下文。接下来,就可以设置文本的字体样式,包括字体的大小、字体类型等,这对测量结果的准确性有直接影响。比如在示例...
**注意**:ID不允许重复使用,如果在页面中出现重复的ID,可能会导致不可预知的结果。 #### 二、选择器的声明 ##### 1. 集体声明 可以同时对多个选择器应用相同的样式规则,这种方式称为集体声明。例如: ```css ...
2. 给父元素设置固定高度:适用于高度可预知的情况。 3. 使用空的`div`并设置`clear:both`:简单,但增加了额外的HTML元素。 【CSS样式表优先级计算】 CSS优先级按以下顺序递增: 1. 浏览器默认样式(最低) 2. ...