JS（body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft） JS

document.body.clientWidth 获取body元素对象的内容可视区域的宽度，即clientWidth=width+padding，不包括滚动条。
document.body.clientHeight 获取body元素对象的内容可视区域的高度，即clientHeight=height+padding，不包括滚动条。
浏览器兼容性在IE7中，如果给body设置滚动条的话，滚动条是出现在body内部的。所以当给body设置width和height时，在IE7中clientWidth和clientHeight的值是要比其它浏览器中的值小一些的。
document.body.offsetWidth 获取body元素对象的宽度，即offsetWidth=width+padding+border，也可以写成offsetWidth=clientWidth+border。
document.body.offsetHeight 获取body元素对象的高度，即offsetHeight=height+padding+border，也可以写成offsetHeight=clientHeight+border。
浏览器兼容性在IE7中，如果给body设置滚动条的话，滚动条是出现在body内部的。所以offsetWidth和offsetHeight的值还需要加上滚动条的宽度。当然最终的值和其它浏览器是一样的。
document.body.scrollWidth 获取body元素对象内容的实际宽度，即对象的滚动宽度。
document.body.scrollHeight 获取body元素对象内容的实际高度，即对象的滚动高度。
浏览器兼容性

在FireFox和IE中，其获取的就是body元素对象内部内容的实际宽高。
在Chrome、Safari、Opera中，scrollWidth和scrollHeight获取的是整个页面文档的滚动宽高。

document.body.clientLeft 【JS（body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft）】获取body元素对象的左边框的宽度。
document.body.clientTop 获取body元素对象的上边框的宽度。
浏览器兼容性各浏览器表现一致。
document.body.offsetLeft 获取body元素对象相对于自身的位置。
document.body.offsetTop 获取body元素对象相对于自身的位置。
浏览器兼容性

在Chrome、Opera、Safari、IE8、IE9和IE10中，工作正常，offsetLeft和offsetTop的值都为0。
在FireFox中，offsetLeft和offsetTop的值为负的body元素的border-width。
在IE7中，offsetLeft和offsetTop指的是body元素对象的边框（不包括边框）到页面文档边缘的距离。

document.body.scrollLeft 获取页面文档向右滚动过的像素数。
document.body.scrollTop 获取页面文档向下滚动过的像素数。
浏览器兼容性

在FireFox、IE8、IE9和IE10中，scrollLeft和scrollTop的值始终为0。
在IE7中，scrollLeft和scrollTop的值为body元素对象最顶端和对象内容的最顶端之间的距离，即滚动条滚过的距离。

本文所用的测试代码如下：

鬼眼邪神的博客 - 锐客网 *{ margin:0; padding:0; } html { margin:20px; padding:20px; width:600px; border:10px solid #000; } body { margin:0 0 0 100px; width:400px; height:800px; border:5px solid #000; background:yellow; overflow:scroll; } .green { position:relative; margin:50px auto; padding:20px; width:80px; height:80px; border:10px solid #000; background:rgb(0,255,0); } .con { margin:0 auto; width:380px; }