DOM中涉及到元素大小的几种计算方式

offsetTop，offsetLeft，clientHeight，clientWidth，scrollHeight…等等属性如果没有特殊的体会，往往看一遍忘一遍。下文中系统的总结了以上几种计算页面元素大小的属性的性质和区别。

偏移量大小

元素的偏移量包括以下几个属性：

• offsetHeight：元素在垂直方向上占用的空间大小。包括：元素的高度，（可见的）滚动条高度，上下边框的高度
• offsetWidth： 元素在水平方向上占用的空间大小。包括：元素的宽度，（可见的）滚动条宽度，左右边框的宽度
• offsetLeft： 元素的左外边框至包含元素的左内边框之间的像素距离
• offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离

如下图所示：

何为包含元素？

offsetParent 属性代表了元素的包含元素。

客户区大小

元素的客户区大小指的是元素内容以及其内边距所占据的空间大小。（注：该大小不包含border的大小）。

客户区的大小包括以下几个属性：

• clientHeight: 元素内容区域高度加上上下内边距的高度
• clientWidth: 元素内容区域宽度加上左右内边距的宽度

如下图所示：

如何获取浏览器视口大小？

document.documentElement.clientHeight(clientWidth)

或

document.body.clientHeight(clientWidth) (IE7之前的版本)

滚动大小

滚动大小指的是包含滚动内容元素的大小。其包含以下几个属性：

• scrollHeight: 没有滚动条的情况下，元素内容的总高度
• scrollWidth: 没有滚动条的情况下，元素内容的总宽度
• scrollTop: 被隐藏在内容区域上侧的高度
• scrollLeft: 被隐藏在内容区域左侧的高度

通过设置scrollTop或者scrollLeft的值，可以动态的控制滚动条的位置。

例如：

• 回到顶部按钮功能的实现 element.scrollTop = 0
• 聊天窗口中滚动条始终位于内容区域的最底部 element.scrolllTop = element.scrollHeight

如图所示：