js 中style.height和offsetHeight比较

看到蓝色经典论坛的一个讨论帖子：

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在使用时注意解决兼容问题