vue获取div的宽高、位置、浏览器宽高、设置位置

最新推荐文章于 2024-07-29 16:54:02 发布

原创最新推荐文章于 2024-07-29 16:54:02 发布 · 3.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

该代码段展示了如何使用JavaScript获取浏览器窗口的尺寸以及一个特定div元素的宽高和位置信息。它利用了`getBoundingClientRect()`方法来获取元素相对于视口的位置，并存储了div的left,top,right,bottom坐标。此外，还提及了Vue.js的$refs来引用组件。

<div ref="viewtools"></div>

// 获取浏览器宽高
var w = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
var h = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;

// 获取div宽高
let divW=this.$refs.viewtools.clientWidth;
let divH=this.$refs.viewtools.clientHeight;

//获取拖动div的位置
let top=this.$refs.viewtools.getBoundingClientRect().top;
let left=this.$refs.viewtools.getBoundingClientRect().left;
let right=this.$refs.viewtools.getBoundingClientRect().right;
let bottom=this.$refs.viewtools.getBoundingClientRect().bottom;
console.log(w,h);
console.log(`top:${top},left:${left},right:${right},bottom:${bottom}`);

// 设置div位置
let positionleft=this.$refs.viewtools.style.left;
let positiontop=this.$refs.viewtools.style.top;
let positionright=this.$refs.viewtools.style.right;
let positionbottom=this.$refs.viewtools.style.bottom;