var mydiv = document.getElementById("mydiv"); console.log("mydiv.clientHeight=",mydiv.clientHeight); // 200 console.log("mydiv.clientWidth=",mydiv.clientWidth); // 183（减去了滚动条的宽度）
而在Mac系统下，滚动条不占高度，这时候client的宽度还是200.
总结
假入无padding无滚动条，clientWidth=style.width
假如有padding无滚动轴，clientWidth=style.width+style.padding*2
假如有padding有滚动，且滚动是显示的，clientWidth=style.width+style.padding*2-滚动轴宽度
clientLeft和clientTop
这两个返回的是元素周围边框的厚度，如果不指定一个边框或者不定位该元素，他的值就是0.
我们还是以body为例：
body{ border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; overflow: scroll; } console.log(document.body.clientLeft); //20 console.log(document.body.clientTop); //20
这一对属性是用来读取元素的body的宽度和高度的
clientTop=border-top的border-width
clientLeft=border-left的border-width
与offset相关宽高介绍
与offset相关的宽高又有如下几个属性：
document.body.offsetWidth
document.body.offsetHeight
document.offsetLeft
document.offsetTop
offsetWidth与offsetHeight
这一对属性指的是元素的border+padding+content的宽度和高度。
该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关。
我们还是以body为例：
body{ border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; overflow: scroll; } console.log("offsetWidth=",document.body.offsetWidth); //620（width+margin*2+padding*2+border*2） console.log("offsetHeight=",document.body.offsetHeight); //470（width+margin*2+padding*2+border*2）
总结
假如无padding无滚动条无border：
offsetWidth=clientWidth=style.width
假如有padding无滚动条有border：
offsetWidth=style.width+style.padding2+(border-width)2 offsetWidth=clientWidth+border宽度*2
假如有padding有滚动条，且滚动条是显示的，有border：
offsetWidth=style.width+style.padding2+(border-width)2 offsetWidth=clientWidth+滚动条宽度+border宽度*2
offsetLeft和offsetTop
这两个属性是基于offsetParent的，了解这两个属性我们必须先了解它，什么是offsetParent呢？
如果当前元素的父级元素没有进行CSS定位（position为absolute或relative）,offsetParent为border.
假如当前元素的父级元素中有CSS定位，offsetParent取最近的那个父级元素。
在IE6/7中：
offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left)
在IE8/9/10及Chrome中：
offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParentd的padding-left)+(当前元素的margin-left)
在FireFox中：
offsetLeft=(offsetParent的margin-left)+(当前元素的margin-left)+(offsetParent的padding-left)
、、、、看到这里是不是已经懵逼了？、、、还是举例子吧：
CSS:
body{ border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; } #mydiv{ width: 400px; height: 200px; padding: 20px; margin :10px; background: #f60; border: 20px solid #888; }
在IE8/910及Chrome中
mydiv.offsetLeft = 80
mydiv.offsetTop = 80
在火狐中
mydiv.offsetLeft = 60
mydiv.offsetTop = 60
在IE低版本IE6/7中是
mydiv.offsetLeft = 50
mydiv.offsetTop = 50
与scroll相关宽高介绍
与scroll相关的宽高属性有如下几个：
document.body.scrollWidth
document.body.scrollHeight
document.body.scrollLeft
document.body.scrollTop
scrollWidth和scrollHeight
document.body的scrollWidth和scrollHeight与div的scrollWidth和scrollHeight是有区别的。
我们先来看看document.body的scrollWidth和scrollHeight：
给定宽高小于浏览器窗口
scrollWidth通常是浏览器窗口的宽度
scrollHeight通常是浏览器窗口的高度
给定宽高大于浏览器窗口，且内容小于给定宽高
scrollWidth给定的宽度+其所有padding、margin和border
scrollHeight给定的高度+其所有的padding、margin和border
给定宽高大于浏览器窗口，且内容大于给定宽高
scrollWidth内容宽度+其所有的padding、margin和border
scrollHeight内容高度+其所有的padding、margin和border
再来看看在某div中scrollWidth和scrollHeight：
在无滚动轴的时候
scrollWidth==clientWidth=style.width+style.padding*2
在有滚动轴的时候
scrollWidth==实际内容的宽度+padding*2
scrollHeight==实际内容的高度+padding*2
scrollLeft和scrollTop