看到蓝色经典论坛的一个讨论帖子:
http://bbs.blueidea.com/thread-3072537-1-1.html
从两个人的争论中,更加深入的了解了style.height和offsetHeight的区别
style.height:
只能在div在行内样式设置了height才能获取到
例如:<div id="h" style="height:200px;">height</div>
document.getElementById("h").style.height 能获取到 height等于200px;并且获取的是一个字符串“200px”
但是如果:<div id="h">height</div>
在css中设置#h{height:200px;}
这时document.getElementById("h").style.height 就获取不到height的值;
缺点:
如果height值不写在行内样式,style.height为undefind,无法获取;
在高度超过范围的情况下,style.height就是获取的错误高度;
style.height只能获取DOM把height设置在行内样式里面的情况(js直接设置也可);
讨论:
style.height适合做自定义函数setStyle(name,value) getComputedStyle + currentStyle +obj.style
直接用style.height取高度程序扩展性很低;
可以在个大门户网站,各种小站,各种技术贴,各种代码分享里等等无数地方找到js直接设置css的情况;
style.height非常明确的返回的是我设置的高,不管是js设置还是style中设置,它非常准确
1.效率:ie6没试,除ie8外几大主流浏览器上面offsetHeight速度比较快的,不过具体应用上一般不会影响,但我们尽量提高效率还是比较好的。
2.我们一般操作dom的时候是改变他表现出来的效果,因此还是offsetHeight更加合适
3.style.height获取到的是字符串,而且带上单位的,有计算操作的情况下offsetHeight会更加方便
4.兼容性上面来说,如果你对象1在两个浏览器上面的offsetHeight不同,那你要设置对象2的高度的时候用的是他表现出来的高度还是style设置的高度呢?举个例子:ie6下面容器1style设置了height:100px;然而被子对象撑大了,你要设置容器2的高度跟容器1的高度相同,那么你是用style.height还是offsetHeight呢?
offsetHeight:
这个的优点是能获取到css中设置的height的值,缺点是兼容问题,offsetHeight在各个浏览器下的解释不同。
例如:
<div id="m" style="height:100px; ">1<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />1</div>
在chrome和IE下解析就不同
缺点:
如果要获取css的height,getComputedStyle(标准浏览器)和currentStyle(IE)方法显然更好
讨论:
不同浏览器的中offsetHeight的值不一样,是CSS造成的,和offsetHeight没有关系。无论,我们用offsetHeight还是style.height,目的都是获取该对象的真实高度来进行后面的计算。但对象的高度是否一致,是CSS的责任。如果一个元素的高度网页中显示明明是200px,但style.height获取的高度是100px;如果是错误的数值,后面的计算无从谈起;
兼容性问题无关offsetHeight。如果不同的浏览器显示的高度不一样,先把CSS改对;
分析jquery1.8源码:
function getWidthOrHeight( elem, name, extra ) {
// Start with offset property, which is equivalent to the border-box value
var val = name === "width" ? elem.offsetWidth : elem.offsetHeight,
valueIsBorderBox = true,
isBorderBox = jQuery.support.boxSizing && jQuery.css( elem, "boxSizing" ) === "border-box";
if ( val <= 0 ) {
// Fall back to computed then uncomputed css if necessary
val = curCSS( elem, name );
if ( val < 0 || val == null ) {
val = elem.style[ name ];
}
// Computed unit is not pixels. Stop here and return.
if ( rnumnonpx.test(val) ) {
return val;
}
// we need the check for style in case a browser which returns unreliable values
// for getComputedStyle silently falls back to the reliable elem.style
valueIsBorderBox = isBorderBox && ( jQuery.support.boxSizingReliable || val === elem.style[ name ] );
// Normalize "", auto, and prepare for extra
val = parseFloat( val ) || 0;
}
// use the active box-sizing model to add/subtract irrelevant styles
return ( val +
augmentWidthOrHeight(
elem,
name,
extra || ( isBorderBox ? "border" : "content" ),
valueIsBorderBox
)
) + "px";
}
里面第一句var val = name === "width" ? elem.offsetWidth : elem.offsetHeight,别人第一选择就用的offsetHeight,紧接着在if ( val <= 0 ) 的情况下再使用curCSS函数(也就是getComputedStyle + currentStyle方法,自己可以看这个函数的代码),最后才选择style.height
当然如果使用jquery,height();是最好的解决方法
个人认为:
height()>offsetHeight>style.height
因为比较在没有在html和用js设置height时,style.height无法获得height
offsetHeight在使用时注意解决兼容问题