Web前端之JavaScript与Vue获取屏幕宽高、元素宽高、距离、位置、document、window、screen、client、offset、scroll、avail

Vue获取屏幕宽高

01、在data中获取

data() {
	return {
		// 屏幕宽度
		screenWidth: document.body.clientWidth,
		// 屏幕高度
		screenHeight: document.body.clientHeight
	}
}

02、在mounted函数中获取

mounted() {
	window.screenWidth = document.body.clientWidth;
    window.screenHeight = document.body.clientHeight;
    this.screenWidth = window.screenWidth;
    this.screenHeight = window.screenHeight;
    
    console.log(window.screenWidth);
    console.log(window.screenHeight);
    console.log(this.screenWidth);
    console.log(this.screenHeight);
}

JavaScript获取屏幕宽高

01、网页可视区域宽高

let clientWidthHeight = () => ({
    clientWidth: document.body.clientWidth,
    clientHeight: document.body.clientHeight
  }),
  { clientWidth, clientHeight } = clientWidthHeight();
  
console.log("网页可视区域宽高：", clientWidth, clientHeight);

02、包括边线的网页可视区域宽高

let offsetWidthHeight = () => ({
    offsetWidth: document.body.offsetWidth,
    offsetHeight: document.body.offsetHeight
  }),
  { offsetWidth, offsetHeight } = offsetWidthHeight();
  
console.log("包括边线的网页可视区域宽高：", offsetWidth, offsetHeight);

03、网页正文全文宽高

let scrollWidthHeight = () => ({
    scrollWidth: document.body.scrollWidth,
    scrollHeight: document.body.scrollHeight
  }),
  { scrollWidth, scrollHeight } = scrollWidthHeight();
  
console.log("网页正文全文宽高：", scrollWidth, scrollHeight);

04、网页被卷去的上左

let scrollTopLeft = () => ({
    scrollTop: document.body.scrollTop,
    scrollLeft: document.body.scrollLeft
  }),
  { scrollTop, scrollLeft } = scrollTopLeft();
  
console.log("网页被卷去的上左：", scrollTop, scrollLeft);

05、网页正文部分上左

let screenTopLeft = () => ({
    screenTop: window.screenTop,
    screenLeft: window.screenLeft
  }),
  { screenTop, screenLeft } = screenTopLeft();
  
console.log("网页正文部分上左：", screenTop, screenLeft);

06、屏幕分辨率的宽高

let widthHeight = () => ({
    width: window.screen.width,
    height: window.screen.height
  }),
  { width, height } = widthHeight();
  
console.log("屏幕分辨率的宽高：", width, height);

07、屏幕可用工作区宽高

let availWidthHeight = () => ({
    availWidth: window.screen.availWidth,
    availHeight: window.screen.availHeight
  }),
  { availWidth, availHeight } = availWidthHeight();
  
console.log("屏幕可用工作区宽高：", availWidth, availHeight);

08、相关链接

博客园-原文

全系列

前言

1、在原生web前端中使用时注意要等到页面加载完成才能获取到dom，只有获取到dom才能正确的到对应网页、屏幕或窗口的值。如何才能确保及时获取到正确值呢？可以使用递归调用实现，最好不要使用定时器。
2、在vue中使用时最好配合this.$nextTick使用，有时候生命周期也会欺骗网页dom。

01、网页可见区域

宽

document.body.clientWidth

---

高

document.body.clientHeight

02、网页可见区域，包括边线的宽

宽

document.body.offsetWidth

---

高

document.body.offsetHeight

03、网页正文全文

宽

document.body.scrollWidth

---

高

document.body.scrollHeight

04、网页被卷去

高

document.body.scrollTop

---

左

document.body.scrollLeft

05、网页正文部分

上

window.screenTop

---

左

window.screenLeft

06、屏幕分辨率

高

window.screen.height

---

宽

window.screen.width

07、屏幕可用工作区

高

window.screen.availHeight

---

宽

window.screen.availWidth

08、获取窗口

宽

window.innerWidth

---

高

window.innerHeight

09、client系列

clientWidth和clientHeight

对于内联元素，其clientWidth和clientHeight属性值为0。
clientWidth和clientHeight的值会被四舍五入为一个整数。
Element.clientWidth属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条、边框和外边距。Element.clientHeight属性同上。
clientWidth = contentWidth + paddingWidth * 2。

let idBox = document.getElementById('idBox');
console.log(idBox.clientWidth);
console.log(idBox.clientHeight);

clientTop和clientLeft

容器上边框和左边框的宽度值。

let idBox = document.getElementById('idBox');
console.log(idBox.clientLeft);
console.log(idBox.clientTop);

10、offset系列

offsetParent

Element.offsetParent返回一个指向最近的(只包含层级的最近)包含该元素的定位元素或者最近的table，td，th，body元素， 当元素的style.display设置为none时，offsetParent返回null。

var idBox = document.getElementById('idBox');
console.log(idBox.offsetParent);

offsetWidth和offsetHeight

分别表示元素的布局宽度和布局高度，是由元素的边框、元素的padding(内边距)，滚动条的宽度(如果存在的话)以及CSS设置的宽度。该属性值会被四舍五入为一个整数。
offsetWidth = contentWidth + padding * 2 + border * 2 = clientWidth + border * 2。

let idBox = document.getElementById('idBox');
console.log(idBox.offsetWidth);
console.log(idBox.offsetHeight);

offsetTop和offsetLeft

分别返回当前元素相对于其offsetParent元素的顶部和左侧内边距的距离。该属性值会被四舍五入为一个整数。

let idBox = document.getElementById('idBox');
console.log(idBox.offsetTop); // => 50 父级没有定位，相对body
console.log(idBox.offsetLeft); // => 50 父级没有定位，相对body

let idChild = document.getElementById('idChild');
console.log(idChild.offsetTop); // => 30 父级有定位，相对idBox
console.log(idChild.offsetLeft); // => 30 父级有定位，相对idBox

11、scroll系列

scrollWidth和scrollHeight

分别返回元素内容的宽度和高度，包括由于overflow溢出而在屏幕上不可见的内容， 当内容宽度小于元素宽度的时候，返回值同clientWidth和clientHeight。

scrollTop和scrollLeft

该属性可以获取和设置一个元素的内容的垂直滚动或水平滚动的像素数，当没有产生滚动条时，这两个属性的值都为0
如果一个元素不能被滚动(元素没有溢出)，则他们将被设置为0
如果设置的值小于0，则他们的值会被设置为0
如果设置了超出这个容器可滚动的值，则他们将被设置为最大值
该属性值会被四舍五入为一个整数
scrollTop和scrollLeft的值仅在存于滚动条的元素上有效，否则他们的值恒定为0

12、getBoundingClientRect

Element.getBoundingClientRect()方法返回元素的大小及其相对视口的位置
x和y是该元素左上角相对于浏览器视口左上角的坐标
bottom、left、right和top是该元素相对于浏览器视口左上角的距离
width和height是该元素的宽度和高度