client offset scroll 之间的区别

一、client

属性	值
clientWidth	元素被设置的宽度 + padding左右内间距
clientHeight	元素被设置的高度 + padding上下内间距
clientLeft	左 边框的宽度
clientTop	上 边框的宽度

 

二、offset

属性	值
offsetWidth	元素被设置的宽度 + padding左右内间距 + 左右边框的值
offsetHeight	元素被设置的高度 + padding上下内间距 + 上下边框的值
offsetLeft	元素外边距离父级左内边距
offsetTop	元素外边距离父级上内边距
offsetParent	返回这个元素的父级元素

 

注：1）offsetLeft/offsetTop：参照由父级身上的 position：absolute/fixed，如果父级元素身上没有就逐层向上查找，直到 body；

2）offset 必须和 position 配合使用，往往这个值还必须是 absolute；

3）offset往往和我们做元素的运动有关；

 

三、scroll

属性	值
scrollWidth/scrollHeight	就是我们设置的宽和高加内边距（内容没有溢出的前提，如果超出了范围就按内容而定）
scrollLeft/scrollTop	滚动条卷走的高度

 

四、总结

1）client系列不获取边框数值，offset会获取边框的数值；

2）以上两者获取到的数值都受元素被设置的宽高具体数值影响，如果在出现滚动条的情况下想获取元素内所有内容的实际高度，则使用scrollHeight；

3）获取浏览器的body的属性是有兼容的

var  dd=document . body || document . documentElement;

　　获取body的整个文档的高

document . scrollHeight || document . documentElement . scrollHeight;

　　获取屏幕的高（浏览器的可视区）

document . body || document . documentElement . clientHeight