js中不同高度和顶部的区别和比较

每次在js中看到clientheight (clienttop)、offsetheight (offsettop)和scrollHeight(scrollTop)，我根本分不清它们之间的区别。但是，不值得和他们见一两次面，然后每次都要看他们的差异，才能决定用哪一个。

本文主要基于chrome。浏览器之间可能还是有一些区别，但是很多都没有真正遇到过，也不是很清楚。以后遇到类似的兼容性问题，记录在这里。这一次，记录chrome浏览器中各种属性的差异，方便以后查看。

客户身高，偏右，身高差。

ClientHeight在所有浏览器中基本相同，约定为内容可见区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度不包括滚动条和边距，而是包括填充，也就是说实际的clientHeight=当前对象可见区域的高度填充值，如下图所示，clientHeight=对象可见区域的高度(300)，上下填充值(20)=320。

在不同浏览器中实用的Javascript方案：

var w=document . document element . client width | | document . body . client width；var h=document . document element . client height | | document . body . client height；OffsetHeight=当前对象的高度。当前对象的高度与上图中可见区域的高度相同，因此offset heat=300 padding(20px)borde(10px)=330。

ScrollHeight是网页内容的实际高度，最小值为clientHeight，表示可以等于clientHeight。但是，我们假设这样一种情况，如下面的代码所示，父div的高度是300px，子div的高度是500px。这时会形成一个滚动条，父div的结构图如下：

父div的ScrollHeight应该是scrollHeight=500px填充。

因为滚动条是在此时生成的，所以父div的可视区域高度是283，当前对象高度，即父div的高度是300。

ClientHeight=283px填充值(20px)=303px。

偏移高度=父div的高度(300px)填充值(20px)边框(10px)=330px。

div id=' parent ' style=' padd :10 px；border:5px红色固体；高度：300 px；宽度width:200pxoverflow : auto ' div style=' height :500 px；宽度：400px'/div/div客户端顶部、偏移顶部和滚动顶部之间的差异。

ClientTop可以通过引用clientHeight来理解，client height是通过将填充值添加到当前可视区域的高度来计算的，因此clientTop可以理解为当前可视区域与上元素之间的距离。

如上图所示，clientTop为5px，大多数情况下，clientTop为边框值。

OffsetTop是当前对象到主体元素的距离，其计算方法相对复杂。首先，从上图了解。当前对象是指边框内的区域，所以offsetTop的计算应该从当前对象的边距开始。公式如下：offsetTop=边距-当前对象顶部，边距-当前对象所有上级元素顶部，边框-当前对象所有上级元素顶部。需要注意的是，offsetTop不能直接赋值，只能通过这种计算方法得到。

ScrollTop是在当前窗口显示的范围内，从当前对象顶部到当前对象上边缘的距离，即垂直滚动条出现时滚动条拉动的距离。

以上就是js中不同身高和上衣的区别和比较，希望对大家的学习有所帮助。