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

  • A+
所属分类：Web前端
摘要

 1 document.body.scrollHeight;即若文档高度大于一屏,则右侧有滚动条;   1 document.body.clientWidth,document.body.clientHeight // 窗口宽度-滚动条-body的margin*2,高度就是实际内容的高度;  
便宜好用的国外VPS推荐

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.附件  解析图

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

 

便宜好用的国外VPS推荐