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及其以下版本不支持这四个属性。)