javascript中各类高度和宽度的整理

标签：

基础学的不扎实，关于高度宽度的各个属性总是糊里糊涂的，在这里理一下思路。

下面的测试以以下html结构为例

<div id="div1" style="height:200px;width:200px;padding:20px;margin:10px;border:1px solid #000;overflow:scroll">
    <div id="div2" style="height:1000px;width:1000px;padding:20px;margin:10px;border:1px solid #000;">
    </div>
</div>

height

height属性有点特殊，只能获取写在内联样式中的高度值，并且返回的是一个字符串。

height属性还有另外一个特殊的地方。它是style下的一个属性，所以在使用的时候应该是obj.style.height或者document.body.height这样来使用。

height属性获取的是纯粹的高度值，不包括边框，内外填充。

#div1返回结果为200px

#div2返回结果为1000px

clientheight

clientHeight返回的是数字。

结果包含元素的高度+内填充(padding)。

如果该元素出现了横向的滚动条(滚动条的宽/高度一般为17px)，则要减去滚动条的高度。

#div1返回结果为 200 + 20 *2 -17 =223

#div2返回结果为 1000 + 20*2 =1040

document.body.clientHeight || document.documentElement.clientHeight 。这样可以获取浏览器可视区域的高度，不包括浏览器的工具栏地址栏。

offsetHeight

offsetHeight返回的是数字。

结果包括元素的高度+内填充(padding)+边框(border)。

结果与是否出现滚动条无关。

#div1返回的结果为 200 + 20*2 + 1*2 = 242

#div2返回的结果为 1000 + 20*2 + 1*2 =1042

document.body.offsetHeight || document.documentElement.offsetHeight 。这样可以获取整个页面文档的高度。

scrollHeight

scrollHeight返回的是数字。

简单来说返回的是选定元素作为容器，内部能滚动的总高度。

#div1返回的结果为 1000(#div2的高度) + 20*2(#div2的内填充) + 1*2(#div2的边框) + 10*2(#div2的外填充) + 20*2(#div1的内填充) = 1102   ！！！【这是chrome下的计算结果】

　　　　　　　　　 1000(#div2的高度) + 20*2(#div2的内填充) + 1*2(#div2的边框) + 10*2(#div2的外填充) + 20(#div1的内填充，测试发现只取了一半的内填充，目前没搞明白怎么回事) = 1082   ！！！【火狐与ie下的计算结果】

#div2返回的结果为 1000(自身高度) + 20*2(自身的内填充) = 1040   ！！！【该值浏览器之间没有差异】

document.body.scrollHeight || document.documentElement.scrollHeight 。这样可以获取整个页面文档的可滚动高度。

scrollTop

scrollTop返回的是数字。

滚动条距离顶部的距离。

整理暂时先到这里。

width、offsetWidth、clientHeight、scrollWidth、scrollLeft对应上方高度的取值方式。

最后附上一张表。以上整理如果有错误，欢迎指正。

javascript中各类高度和宽度的整理

标签：

原文地址：http://www.cnblogs.com/zhutou/p/4912698.html