2

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

 2 years ago
source link: https://www.fly63.com/article/detial/11224
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
更新日期: 2022-02-28阅读量: 49标签: dom分享

扫一扫分享

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

621c21d10dea6.jpg

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK