问题
今日头条的一道笔试题，offsetWidth、clientWidth、scrollWidth的区别。
分析
JS中document对象的宽高有三种，cilent、offset、scroll
client： clientWidth和clientHeight，clientTop和clientLeft
clientWidth和clientHeight：该属性指的是元素的可视部分宽度和高度，即padding+content，统分为三种情况:
- 假如元素无padding无滚动
clientWidth = style.width - 假如元素有padding无滚动
clientWidth = style.width + style.padding*2 - 假如元素有padding有滚动，且滚动是显示的
clientWidth = style.width + style.padding*2 - 滚动轴宽度
clientHeight同理
clientTop和clientLeft ：这一对属性是用来读取元素的border的宽度和高度的
clientTop = border-top 的 border-widthclientLeft = border-left 的 border-width
body {
width: 500px;
height: 500px;
border: 20px solid red;
margin: 20px;
padding: 10px;
}
div {
width: 300px;
height: 300px;
margin: 10px;
padding: 20px;
border: 20px solid gray;
overflow: auto;
}
<body>
<div id="app">
我是文字<br>
我是文字<br>
我是文字<br>
我是文字<br>
我是文字<br>
</div>
</body>结果如图:
offset：offsetWidth和offsetHeight，offsetTop和offsetLeft
offsetWidth和offsetHeight：这一对属性指的是元素的border+padding+content的宽度和高度
该属性和其内部的内容是否超出元素大小无关，只和本来设置的border以及width和height有关。统分为三种情况:
- 假如元素无padding无滚动无border
offsetWidth = clientWidth = style.width - 假如元素有padding无滚动有border
offsetWidth = style.width = style.padding*2 + border宽度*2 - 假如元素有padding有滚动有border，且滚动是显示的
offsetWidth = style.width = style.padding*2 + (border-width)*2offsetWidth = clientWidth + 滚轴宽度 + border宽度*2
offsetHeight同理
offsetTop和offsetLeft：这个需要先了解offsetParent，规则如下
- 如果当前元素的父级元素没有进行css定位（position为absolute或relative），
offsetParent为body - 如果当前元素的父级元素中有ccss定位(position为absolute或relative)，
offsetParent取最近的那个父级元素
offsetTop和offsetLeft的计算规则如下：
-
在IE8/9/10以及chrome中
offsetLeft = (offsetParent的margin-left) + (offsetParent的border宽度) + (offsetParent的padding-left) + (当前元素的margin-left) -
在FireFox中
offsetLeft = (offsetParent的margin-left) + (offsetParent的padding-left) + (当前元素的margin-left)offsetTop同理
style和body代码同上。结果如图：
scroll：scrollWidth和scrollHeight，scrollTop和scrollLeft
scrollWidth和scrollHeight：细分为body和其他元素，这里不对body做介绍(详细介绍请点击)
在某div中scrollWidth和scrollHeight计算规则如下
-
无滚动轴时：
scrollWidth = clientWhidth = style.width + style.padding*2 -
有滚动轴时：
scrollWidth = 实际内容的宽度 + padding*2
scrollHeight同理
scrollTop和scrollLeft：这对元素是可读写的，指的是当元素其中的内容超出其宽高的时候，元素被卷起的宽度和高度。
style和body代码同上。结果如图：
更详细的介绍，请点击
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。