关于clientHeight，offsetHeight等小笔记

系统管理员 2022-06-01 02:15 133阅读 0赞

# [关于clientHeight，offsetHeight等小笔记][clientHeight_offsetHeight] #

标签： [前端][Link 1]

2016-05-09 15:27  2891人阅读  [评论][Link 2](0)  收藏  [举报][Link 3]

![category_icon.jpg][]  分类：

前端（26） ![arrow_triangle_20_down.jpg][]

之前遇到一个问题：关于clientHeight，offsetHeight，scrollHeight，以及height，contentHeight（width也一样）的区别。因为不太分的清，就去找了一些资料，下面是一些笔记及个人理解（o(╯□╰)o不一定完全正确，望指正）   
这里有参考[http://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively][http_stackoverflow.com_questions_21064101_understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively]，   
[https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth][https_developer.mozilla.org_en-US_docs_Web_API_Element_clientWidth]等等。

这里借用一下别人的图：   
![这里写图片描述][20160509143011370]   
注意这个图中有个问题就是paddingBottom和paddingRight，画的不太对（个人感觉）。另外注意在chrome中paddingBottom是呈现在滚轮部分的底部的，而在别的浏览器则不是这样╮(╯\_╰)╭。

这里可以看一下粗略对比：   
chrome：   
![这里写图片描述][20160509152429673]   
Firefox：   
![这里写图片描述][20160509152503097]

1.首先，有一点要明白，就是如果你在css中设置了height值，然后你在浏览器中调试的时候可能会发现，当你鼠标选中那个元素的时候，它的值可能不等于你之前设置的height的值。   
例如：（在chrome浏览器）

#div1{ width:100px; height:100px; overflow: auto; background-color: yellow; padding:10px; border:4px solid red; }
       
        
         1
         2
         3
         4
         5
         6
         7
         8

结果是这样的：   
![这里写图片描述][20160509143451532]   
显然，这里显示出来的内容区域变为了83\*83。这是为什么….这个问题纠结了我好久，巴特，其实这个答案很简单╮(╯\_╰)╭…..   
这是因为设置的那cssheight包括了scorll bar的宽度…..我们看见的那块内容区域：   
contentHeight = cssHeight- scorllBarHeight   
并且我们可以看出这里scorllBarHeigh=100-83=17

2.再来看clientHeight。这个其实就是可视化区域，包括content，padding但不包括border，scroll bar …他不能从css直接得到，它和scroll bar 的宽度有关   
再看刚才的那个例子，我们讲它打印出来：

console.log(div1.clientHeight);
       
        
         1

![这里写图片描述][20160509144322079]

可以看到结果是103。   
那么它是怎么的出来的呢？   
它的计算式子可以这么写：   
  
clientHeight = cssHeight+ paddingTop+ paddingBottom- scrollBarWidth   
  
这里也就是clientWidth = 100+10+10-17=103   
嘛，根据第1点我们知道，它实际上也是   
  
clientWidth =contentHeight+ paddingTop+ paddingBottom

\*\*3.\*\*offsetHeight的话，其实就是包括border的可视化盒子的全部高度。也就是书，包括了content，padding，scroll bar ，border。也可以说是cssHeight，padding，border。那么上面那个例子中，

console.log(div1.offsetHeight);
       
        
         1

![这里写图片描述][20160509145756530]   
结果是128，可以表示为   
  
offsetHeight=cssHeight+paddingTop+paddingBottom+borderTop +borderBottom

这里也就是offsetHeight=100+10+10+4+4=128

\*\*4.\*\*scrollHeight是包含那些隐藏在滚轮以外区域的盒子内容，它和clientHeight类似只是多包涵了一些隐藏的内容区域。它是根据内容的大小来定的，不能从css中直接获得。

ps：这里有一点需要注意：在chrome中，如果js里返回一个height那么，这个height的值实际上就是content的值，也就是减去了scorll bar ，而不是之前css设置的height。   
用之前的那个例子：在chrome中

console.log(getComputedStyle(div1).height);
       
        
         1

![这里写图片描述][20160509150852607]

显然结果是83，而在IE11中

console.log(div1.currentStyle.height);
       
        
         1

![这里写图片描述][20160509151036792]

结果是100。。

[clientHeight_offsetHeight]: http://blog.csdn.net/creasher/article/details/51353416
[Link 1]: http://www.csdn.net/tag/%e5%89%8d%e7%ab%af
[Link 2]: http://blog.csdn.net/creasher/article/details/51353416#comments
[Link 3]: http://blog.csdn.net/creasher/article/details/51353416#report
[category_icon.jpg]: /images/20220601/e00f75fadcc94b6ba3f86c44c1ee8d77.png
[arrow_triangle_20_down.jpg]: /images/20220601/a717c45bbc104ad8a6381839470124bc.png
[http_stackoverflow.com_questions_21064101_understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively]: http://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively
[https_developer.mozilla.org_en-US_docs_Web_API_Element_clientWidth]: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth
[20160509143011370]: /images/20220601/5bd46197872a402aa060792f6b96d3eb.png
[20160509152429673]: /images/20220601/aac6cc16b4204f7ab6b9bfa4ff1578f4.png
[20160509152503097]: /images/20220601/7a6c0183478042cdb4be542a9124c807.png
[20160509143451532]: /images/20220601/1521b5e5016b42ce90e21924f1de2e27.png
[20160509144322079]: /images/20220601/1ea63da680494a5283d9a17b88562899.png
[20160509145756530]: /images/20220601/2967954f717845a7b5dbcc413620b8b8.png
[20160509150852607]: /images/20220601/d15315140e70453db8024614649ca807.png
[20160509151036792]: /images/20220601/782b0e48d8404cb1842fdde0dfe5eaf4.png