1.常见属性

客户宽高    clientWidth    clientHeight   //元素自身宽高+padding-滚动条
偏移宽高    offsetWidth    offsetHeight   //width+padding+border  实际占位的大小
滚动条宽高   scrollWidth    scrollHeight   //滚动条宽高

2.获取位置

clientLeft   clientTop     //客户坐标
offsetLeft   offsetTop    // 相对父元素的定位  //比如left:100,top:100,就是这个值

当内部内容大于外部元素高度时,写入overflow:auto,就会产生滚动条,在所溢出去的就是滚动条

滚动条事件:  

div5.onscroll=function(){
  console.log(div5.scrollLeft,div5.scrollTop);
}    
div5.getBoundingClientRect();  //获取元素范围矩形 其中包括距离视口的距离，已经元素的宽高，还有left，top，bottom，right 

3.获取可视宽高,获取html的宽高(一屏高度) 

document.documentElement   //打印结果就是HTML

下面这个结果就是可视高度,也就可以理解为一屏的高度;

document.documentElement.clientWidth , document.documentElement.clientHeight 
//窗口宽-滚动条宽(可视区域宽度),高度时可视区域

4.整个文档所占的高度

document.body.scrollHeight;//即若文档高度大于一屏,则右侧有滚动条;

5.滚动条位置

scrollLeft   scrollTop   //可以修改      滚动条坐标  
document.documentElement.scrollTop;//  获取滚动条位置,对应的是HTML标签,一般使用这个
document.body.scrollTop; //对应的是body标签,

6.获取body宽高

document.body.clientWidth,document.body.clientHeight //窗口宽度-滚动条-body的margin*2,高度就是实际内容的高度;

7.document.documentElement.offsetWidth

document.documentElement.offsetWidth,document.documentElement.offsetHeight) ; //窗口宽-滚动条宽 高度是实际内容高度
document.body.offsetWidth,document.body.offsetHeight); //html的offset宽高-body的margin*2

8.附件  解析图

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/11224