主要看这张图，感觉图的意思很清晰了
1.与client相关的宽高
clientWidth/clientHeight——元素的可视部分的宽度和高度，即padding+content，如果出现滚动条，则要减去相应滚动条的宽度。
无padding无滚动条：clientWidth = style.width
有padding无滚动条：clientWidth = style.width+style.padding*2
有padding有滚动条，且滚动条是显示的：clientWidth = style.width+style.padding*2-滚动轴宽度
clientLeft/clientTop——元素周围边框的厚度，如果不指定一个边框或者不定位该元素，其值为0。
clientLeft = border-left的border-width
clientTop = border-top的border-width
2.与offset相关的宽高
offsetWidth/offsetHeight——border+padding+content。该属性和其内部的内容是否超出元素大小无关，只和本来设定的border及width和height有关。
无padding无滚动条无border：offsetWidth = clientWidth = style.width
有padding无滚动条有border：offsetWidth = style.width+style.padding*2+border宽度*2 = clientWidth+border宽度*2
有padding有滚动条，且滚动条是显示的，有border：offsetWidth = style.width + style.padding * 2 + border宽度 * 2 = clientWidth + 滚动轴宽度 + border宽度*2
offsetLeft/offsetTop——与offsetParent有关，而且存在兼容
如果当前元素的父级元素没有进行css定位(position为absolute或relative)，offsetParent为body；如果当前元素的父级元素中有css定位(position为absolute或relative)，offsetParent取最近的那个父级元素。
IE6/7：offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left)；
IE8/9/10及Chrome中：offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParent的padding-left)+(当前元素的margin-left)；
FireFox中：offsetLeft=(offsetParent的margin-left)+(offsetParent的padding-left)+(当前元素的margin-left)；
3.与scroll相关的宽高——scrollWidth/scrollHeight——document.body的scrollWidth和scrollHeight与p的scrollWidth和scrollHeight是有区别的
body的scrollWidth和scrollHeight
给定body宽高小于浏览器窗口：scrollWidth通常是浏览器窗口的宽度；scrollHeight通常是浏览器窗口的高度。
给定body宽高大于浏览器窗口，且内容小于给定宽高：scrollWidth=给定的宽度 + padding + margin + border； scrollHeight = 给定的高度+padding+margin+border。
给定body宽高大于浏览器窗口，且内容大于给定宽高：scrollWidth=内容宽度 + padding + margin + border； scrollHeight = 内容高度+padding+margin+border
p的scrollWidth和scrollHeight（火狐会把body当作p来处理）
无滚动轴时：scrollWidth=clientWidth=style.width+style.padding*2。
有滚动轴时：scrollWidth=实际内容的宽度 + padding*2； scrollHeight = 实际内容的高度+padding*2。
scrollLeft/scrollTop——可读写，卷起的高度
相关推荐：
以上就是js中元素的各种宽高图文详解的详细内容，更多请关注php中文网其它相关文章！
