js里使用的各种元素大小尺寸属性总结

div元素：

getComputedStyle(element, null).width，getComputedStyle(element, null).height：元素内容区域尺寸，不包含外边距，边框以及内边距(IE8及以下使用element.currentStyle代替getComputedStyle())；

clientWidth，clientHeight：元素可视区域尺寸，内边距以内的减去滚动条自身尺寸后的尺寸，即padding + width(height) - 滚动条自身尺寸，

offsetWidth，offsetHeight：元素包含边框以内的尺寸，包含滚动条自身尺寸，即border + padding + width(height)，

scrollWidth，scrollHeigth：元素内边距以内的尺寸，>= clientWidth(clientHeight)；

以上是对于一般元素而言，对于document.documentElement跟document.body，不同浏览器间存在差异较多，特别是对于clientWidth，clientHeight与scrollWidth，scrollHeigth这两种尺寸，不同浏览器，在IE，甚至是不同版本差异都非常明显，个人认为无需特别记住各种差异，只需在编码时根据情况运用即可。

在chrome39测试结果显示，

document.documentElement：

offsetWidth，offsetHeight：body.offsetWidth(offsetHeight) + body.margin

clientWidth，clientHeight：window视窗可见尺寸

scrollWidth，scrollHeigth： 与offsetWidth，offsetHeight相等

document.body：

offsetWidth，offsetHeight：跟一般元素的计算方式一样，这里是body元素

clientWidth，clientHeight：元素可视区域尺寸

scrollWidth，scrollHeigth：>=window视窗可见尺寸

window对象：

innerWidth，innerHeight：窗口中文档显示区域的尺寸，不包括边框，滚动条和菜单栏等部分所占尺寸，该属性可读可写。

outerWidth，outerHeight：窗口本身的尺寸，包含边框，滚动条，菜单栏等尺寸，该属性可读可写。

（IE8及其以下版本不支持这四个属性。）