最简单的获取元素距离浏览器四周边框距离的方法

最新推荐文章于 2023-03-23 18:27:44 发布

原创最新推荐文章于 2023-03-23 18:27:44 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html5

vue3 同时被 2 个专栏收录

22 篇文章

订阅专栏

18 篇文章

订阅专栏

这篇文章介绍了如何在JavaScript和Vue3中获取元素的边界信息。在纯JS中，使用`getElementsByClassName`获取元素后，通过`getBoundingClientRect`方法得到边界坐标。而在Vue3中，借助`ref`创建引用，然后调用`value`获取元素并同样使用`getBoundingClientRect`。这种方法具有良好的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 .纯js

let ele = document.getElementByClassName('class_name')

let ToTop = ele.getBoundingClientRect().top  
let ToLeft = ele.getBoundingClientRect().left 
let ToBottom = ele.getBoundingClientRect().bottom 
let ToRight = ele.getBoundingClientRect().right

2. vue3


let eleRef = ref(null)

let ToTop = eleRef.value.getBoundingClientRect().top  
let ToLeft = eleRef.value.getBoundingClientRect().left 
let ToBottom = eleRef.value.getBoundingClientRect().bottom 
let ToRight = eleRef.value.getBoundingClientRect().right

兼容性好