Javascritp client,offset,scroll的区别，这里只说width和height

之前的我很讨厌client，offset，scroll，因为我觉得我太容易弄混淆了，很多兼容性的问题更让我抓狂，今天好好理清了一下，发觉如果从“盒子模型”和浏览器对style.width的差异进行理解的话，还是容易记得住的，现在分享一下，如果有什么错误的话，欢迎告知。

因为非标准浏览器的style.width=contentWidth+paddingLeft+paddingRight+borderLeft+borderRight,而标准浏览器的style.width=contentWidth(这里的style.width假设设定且没有溢出,style.height同理)

1.client

表示元素的可见区域，及“盒子”的内宽和内高组成的区域（padding+content）,又不包括滚动条,所以

标准浏览器

clientWidth=style.width+style.paddingLeft+style.paddingRight-滚动条宽度

clientHeight=style.height+style.paddingTop+style.paddingBottom-滚动条高度

一些ie浏览器

clientWidth=style.width-borderLeft-borderRight-滚动条宽度

clientHeight=style.height-borderTop+borderBottom-滚动条高度

2.offset

表示元素所占的区域或表示元素自己，通俗点就是自己的大小，通过“盒子模型”可以知道，“盒子”只包括border，padding和content，margin只不过是和另外“盒子”的间隙而已，这样就不难理解offsetWidth和offsetHeight了。

标准浏览器

offsetWidth=style.width+style.paddingLeft+style.paddingRight+borderLeft+borderRight

offsetHeight=style.height+style.paddingTop+style.paddingBottom+borderTop+borderBottom

非标准

offsetWidth=style.width
offsetHeight=style.height

3、scroll

表示滚动，

scrollWidth=contentWidth+paddingLeft+paddingRight（这里的contentWidth表示实际的宽度，不一定等于style.width）

scrollHeight=contentHeight+paddingTop+paddingBottom（这里的contentHeight表示实际的高度，不一定等于style.height）