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>

我们拖动窗口大小

相关文章
|
14天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
16 0
|
17天前
|
前端开发 JavaScript API
JavaScript中多种获取数组最后一个元素的策略。
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
22天前
|
JavaScript
如何用js在页面中添加元素?
如何用js在页面中添加元素?
15 0
|
1月前
|
存储 算法 JavaScript
|
1月前
|
前端开发 JavaScript
探索JavaScript元素节点的属性和方法
探索JavaScript元素节点的属性和方法
6 0
|
1月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
17 0
|
1月前
|
JavaScript 前端开发 小程序
js将数组中相同的元素进行分组 必看
js将数组中相同的元素进行分组 必看
|
1月前
|
JavaScript 前端开发 小程序
js判断某元素出现的次数
js判断某元素出现的次数
|
2月前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:什么是文档碎片(Document Fragment)?有什么作用?
JavaScript DOM 操作:什么是文档碎片(Document Fragment)?有什么作用?
42 0
|
2月前
|
JavaScript 前端开发
JavaScript DOM 操作:如何动态创建和插入元素?
JavaScript DOM 操作:如何动态创建和插入元素?
31 1

相关产品

  • 云迁移中心