一、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