JS-获取屏幕/显示器、浏览器、网页、DOM元素的宽高距离位置信息

介绍

本文主要介绍通过JS获取屏幕/显示器、浏览器、网页、DOM元素的宽高距离位置信息，并实时监听的方法。

一、屏幕/显示器

JS方法：

1 2	console.log("屏幕分辨率的高：", window.screen.height); console.log("屏幕分辨率的宽：", window.screen.width);

1.1

JS方法：

1 2	console.log("屏幕可用工作区高度：", window.screen.availHeight); console.log("屏幕可用工作区宽度：", window.screen.availWidth);

二、浏览器

JS方法：

1 2	console.log("浏览器距离屏幕顶部距离：", window.screenTop); console.log("浏览器距离屏幕左侧距离：", window.screenLeft);

三、网页

3.1 网页内容的宽高

JS方法：

1
2
3

console.log('网页可见区域宽：', document.body.clientWidth);
console.log('网页可见区域宽 (包括边线的宽) ：', document.body.offsetWidth);
console.log('网页正文全文宽（包括由于溢出而无法展示在网页的不可见部分） ：', document.body.scrollWidth);

JS方法：

1
2
3

console.log('网页可见区域高：', document.body.clientHeight);
console.log('网页可见区域高 (包括边线的高) ：', document.body.offsetHeight);
console.log('网页正文全文高（包括由于溢出而无法展示在网页的不可见部分） ：', document.body.scrollHeight);

对于网页而言（即document.body）

情况1：

网页内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。

clientWidth = offsetWidth = scrollWidth = 浏览器窗口的宽度；

clientHeight = offsetHeight = scrollHeight = 浏览器窗口的高度。

情况2：

网页内的内容超过可视区，滚动条出现和可用的情况下。

scrollWidth > offsetWidth > clientWidth

3.2 获取网页滑动距离

JS方法：

mounted() {
  window.addEventListener('scroll', this.handleScroll);
},

methods: {
   handleScroll() {
      const scrollTop = this.getScroll().top;
      console.log(scrollTop)
   },
   getScroll() {
     return {
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
   }
}

document.body.scrollTop、document.documentElement.scrollTop、window.pageYOffset 三者之间的区别和实时监听网页滑动距离详见：《JS-获取网页滑动距离，并实时监听》

四、DOM元素

4.1 获取DOM元素

获取DOM元素的方法详见：《JS-获取DOM元素的五种方法》

4.2 DOM元素的宽高

HTML：

1	<div id="myDom1" class="my_dom_1" />

CSS：

.my_dom_1 {
    width: 300px;
    height: 200px;
    padding: 10px;
    margin: 30px 20px;
    border: 30px solid skyblue;
    background-color: pink;
}

JS方法：

const myDom = document.getElementById('myDom1') || {};
console.log("===offsetWidth:", myDom.offsetWidth);
console.log("===offsetHeight:", myDom.offsetHeight);

console.log("===clientWidth:", myDom.clientWidth);
console.log("===clientHeight:", myDom.clientHeight);

console.log("===scrollWidth:", myDom.scrollWidth);
console.log("===scrollHeight:", myDom.scrollHeight);

const myDomInfo = myDom.getBoundingClientRect();
console.log(myDomInfo.width);
console.log(myDomInfo.height);

说明：

offsetWidth = getBoundingClientRect().width = 左右border + 左右padding + width

offsetHeight = getBoundingClientRect().height = 上下border + 上下padding + height

clientWidth = scrollWidth = 左右padding + width

clientHeight = scrollHeight = 上下padding + height

4.3 获取DOM元素离页面边缘的距离

HTML：

<div id="myDom1" class="my_dom_1" />
<div class="flex-row">
  <div id="myDom2" class="my_dom_2" />
  <div id="myDom3" class="my_dom_3" />
</div>

CSS：

.my_dom_1 {
    width: 300px;
    height: 200px;
    padding: 10px;
    margin: 30px 20px;
    border: 30px solid skyblue;
    background-color: pink;
}

JS方法：

mounted() {
  this.getDomInfo("myDom1");
  this.getDomInfo("myDom2");
  this.getDomInfo("myDom3");
},
methods: {
  getDomInfo(val) {
    const myDom = document.getElementById(val) || {};
    console.log("===offsetTop:", myDom.offsetTop);
    console.log("===offsetLeft:", myDom.offsetLeft);
    
    const myDomInfo = myDom.getBoundingClientRect();
    console.log(myDomInfo.left);
	console.log(myDomInfo.right);
  },
},

说明：

offsetTop，元素上边框外侧距离包含元素（也就是offsetParent）上边框内侧的像素数。(不包括元素上边框的高度)。所以offsetTop是相对尺寸，相对于offsetParent。
offsetLeft，元素左边框外侧距离包含元素（也就是offsetParent）左边框内侧的像素数。(不包括元素左边框的宽度)。所以offsetLeft是相对尺寸，相对于offsetParent。

===>值不会随着页面滑动而变化

getBoundingClientRect()：

left：元素的左边框距离视口左边的距离
right：元素的右边框距离视口左边的距离（left+元素的width+左右padding+左右border）
top：元素的上边框距离视口上边的距离
bottom：元素的下边框距离视口上边的距离（top+元素的height+上下padding+上下border）

===>值会随着页面滑动而变化

4.4 实时监听DOM元素离页面边缘的距离

HTML：

1	<div id="myDom1" class="my_dom_1" />

JS方法：

mounted() {
  window.addEventListener('scroll', this.handleScroll);
},

methods: {
   handleScroll() {
     const myDom = document.getElementById('myDom1') || {};
     const myDomInfo = myDom.getBoundingClientRect();
     console.log("===top:", myDomInfo.top);
   }
}

运行结果如下：

更多详见：《JS-获取DOM元素滑动距离，并实时监听》