| web前端之JavaScript与vue获取屏幕宽高、元素宽高、距离、位置、document、window、client、offset、scroll、screen、avail | 您所在的位置：网站首页 › js获取元素内容高度 › web前端之JavaScript与vue获取屏幕宽高、元素宽高、距离、位置、document、window、client、offset、scroll、screen、avail |
|
MENU
vue获取屏幕宽高1、在data中获取2、在mounted函数中获取
JavaScript获取屏幕宽高1、网页可视区域宽高2、包括边线的网页可视区域宽高3、网页正文全文宽高4、网页被卷去的上左5、网页正文部分上左6、屏幕分辨率的宽高7、屏幕可用工作区宽高8、相关链接
全系列前言01、网页可见区域02、网页可见区域，包括边线的宽03、网页正文全文04、网页被卷去05、网页正文部分06、屏幕分辨率07、屏幕可用工作区08、获取窗口09、client系列10、offset系列11、scroll系列12、getBoundingClientRect
vue获取屏幕宽高
1、在data中获取
data() {
return {
// 屏幕宽度
screenWidth: document.body.clientWidth,
// 屏幕高度
screenHeight: document.body.clientHeight
}
}
2、在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获取屏幕宽高
1、网页可视区域宽高
let clientWidthHeight = () => ({
clientWidth: document.body.clientWidth,
clientHeight: document.body.clientHeight
}),
{ clientWidth, clientHeight } = clientWidthHeight();
console.log("网页可视区域宽高：", clientWidth, clientHeight);
2、包括边线的网页可视区域宽高
let offsetWidthHeight = () => ({
offsetWidth: document.body.offsetWidth,
offsetHeight: document.body.offsetHeight
}),
{ offsetWidth, offsetHeight } = offsetWidthHeight();
console.log("包括边线的网页可视区域宽高：", offsetWidth, offsetHeight);
3、网页正文全文宽高
let scrollWidthHeight = () => ({
scrollWidth: document.body.scrollWidth,
scrollHeight: document.body.scrollHeight
}),
{ scrollWidth, scrollHeight } = scrollWidthHeight();
console.log("网页正文全文宽高：", scrollWidth, scrollHeight);
4、网页被卷去的上左
let scrollTopLeft = () => ({
scrollTop: document.body.scrollTop,
scrollLeft: document.body.scrollLeft
}),
{ scrollTop, scrollLeft } = scrollTopLeft();
console.log("网页被卷去的上左：", scrollTop, scrollLeft);
5、网页正文部分上左
let screenTopLeft = () => ({
screenTop: window.screenTop,
screenLeft: window.screenLeft
}),
{ screenTop, screenLeft } = screenTopLeft();
console.log("网页正文部分上左：", screenTop, screenLeft);
6、屏幕分辨率的宽高
let widthHeight = () => ({
width: window.screen.width,
height: window.screen.height
}),
{ width, height } = widthHeight();
console.log("屏幕分辨率的宽高：", width, height);
7、屏幕可用工作区宽高
let availWidthHeight = () => ({
availWidth: window.screen.availWidth,
availHeight: window.screen.availHeight
}),
{ availWidth, availHeight } = availWidthHeight();
console.log("屏幕可用工作区宽高：", availWidth, availHeight);
8、相关链接
博客园-原文 全系列 前言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、getBoundingClientRectElement.getBoundingClientRect()方法返回元素的大小及其相对视口的位置 x和y是该元素左上角相对于浏览器视口左上角的坐标 bottom、left、right和top是该元素相对于浏览器视口左上角的距离 width和height是该元素的宽度和高度 |
| CopyRight 2018-2019 实验室设备网 版权所有 |