1.client系列:
- clientTop: 内容到边框顶部的距离, 即边框的高度.
- clientLeft: 内容区域到边框左部的区域, 即边框的宽度.
- clientWidth: 内容区域+左右padding, 表示可视宽度.
- clientHeight: 内容区域+上下padding, 表示可视高度.
2.屏幕的可视区域:
<script>
window.onload = function(){
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
window.onresize = function(){
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
}
</script>
3.offset系列
- offsetWidth: 占位宽=内容+padding+border.
- offsetHeight: 占位高.
- offsetTop: 如果盒子没有设置定位, offsetTop表示到body顶部的距离; 如果盒子设置了定位, 那么offsetTop是以父辈为基准的top值.
- offsetLeft: 如果盒子没有设置定位, offsetLeft表示到body左部的距离; 如果盒子设置了定位, 那么offsetLeft是以父辈为基准的left值.
4.scroll系列
- scrollTop
- scrollLeft
- scrollWidth
- scrollHeight: 内容的高度+padding, 不包含边框.