js获取元素相对于document的坐标

简介: js获取元素相对于document的坐标

孤独没有什么不好。使孤独变得不好,是因为你害怕孤独。——《孤独六讲》

代码如下:

const getOffset = el => {
    const { left, top } = el.getBoundingClientRect()
    const { scrollTop, scrollLeft } = document.body
    return { top: top + scrollTop, left: left + scrollLeft }
}

使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div style="display: flex;align-items:center;justify-content:center;width: 100vw;height: 100vh;">
    <div id="ruben" style="width: 100px;height: 100px;background-color: red;"></div>
</div>
<body>
    <script type="application/javascript">
        const getOffset = el => {
            const { left, top } = el.getBoundingClientRect()
            const { scrollTop, scrollLeft } = document.body
            return { top: top + scrollTop, left: left + scrollLeft }
        };
        window.onresize = e => {
            console.table(getOffset(document.getElementById('ruben')))
        }
    </script>
</body>
</html>

我们拖动窗口大小

相关文章
|
2月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
13 1
|
2月前
|
JavaScript 前端开发
JavaScript如何遍历表单元素?
JavaScript如何遍历表单元素?
|
2天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
15天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
27 10
|
15天前
|
JavaScript 前端开发
js添加、删除、替换或插入元素。
js添加、删除、替换或插入元素。
8 0
|
18天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
在JavaScript中,有五种主要方法选取HTML元素:1) `getElementById` 通过id选取单个元素;2) `getElementsByClassName` 选取具有特定类名的所有元素;3) `getElementsByTagName` 选取特定标签的所有元素;4) `querySelector` 使用CSS选择器选取单个元素;5) `querySelectorAll` 选取匹配CSS选择器的所有元素。这些方法结合使用可精确地定位到DOM树中的目标元素。
12 1
|
18天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何动态创建和插入元素?
使用JavaScript的`createElement`, `createTextNode`和`appendChild`方法可动态创建并插入元素。
13 2
|
2月前
|
JSON JavaScript 前端开发
JavaScript随手笔记---数组中相同的元素进行分组(数据聚合) groupBy函数
JavaScript随手笔记---数组中相同的元素进行分组(数据聚合) groupBy函数
|
2月前
|
JavaScript 前端开发
JS获取DOM元素的八种方法(含代码,简单易懂)
JS获取DOM元素的八种方法(含代码,简单易懂)
|
2月前
|
移动开发 HTML5
编程笔记 html5&css&js 024 HTML表单元素
编程笔记 html5&css&js 024 HTML表单元素