浅谈DOM常见属性--位置/宽高.....

1.常见属性

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

2.获取位置

1 clientLeft   clientTop     //客户坐标
2 offsetLeft   offsetTop    // 相对父元素的定位  //比如left:100,top:100,就是这个值               
3 
4 当内部内容大于外部元素高度时,写入overflow:auto,就会产生滚动条,在所溢出去的就是滚动条
5 * 滚动条事件:  div5.onscroll=function(){
6             console.log(div5.scrollLeft,div5.scrollTop);
7              }    
8 div5.getBoundingClientRect();  //获取元素范围矩形 其中包括距离视口的距离，已经元素的宽高，还有left，top，bottom，right

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

1 document.documentElement   //打印结果就是HTML
2 下面这个结果就是可视高度,也就可以理解为一屏的高度;
3 document.documentElement.clientWidth , document.documentElement.clientHeight 
4 //窗口宽-滚动条宽(可视区域宽度),高度时可视区域

4.整个文档所占的高度

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

5.滚动条位置

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

6.获取body宽高

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

7.document.documentElement.offsetWidth

1 document.documentElement.offsetWidth,document.documentElement.offsetHeight) ; //窗口宽-滚动条宽高度是实际内容高度

2 document.body.offsetWidth,document.body.offsetHeight); //html的offset宽高-body的margin*2

8.附件解析图

posted on 2022-02-27 22:04 瞿~锐〃阅读(427) 评论(0) 收藏举报