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>

我们拖动窗口大小

相关文章
|
4月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
4月前
|
数据采集 存储 监控
实现自动化数据抓取:使用Node.js操控鼠标点击与位置坐标
本文介绍了如何使用Node.js和Puppeteer实现自动化数据抓取,特别是针对新闻网站“澎湃新闻”。通过设置代理IP、User-Agent和Cookie,提高爬虫的效率和隐蔽性,避免被网站封锁。代码示例展示了如何模拟鼠标点击、键盘输入等操作,抓取并整理新闻数据,适用于需要规避IP限制和突破频率限制的场景。
231 10
|
4月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
5月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
152 4
|
5月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
73 4
|
5月前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
126 1
|
6月前
|
JavaScript 前端开发
JavaScript从二维数组抽取元素组成新数组的三种方法
JavaScript从二维数组抽取元素组成新数组的三种方法
|
6月前
|
JavaScript 前端开发
JavaScript从二维数组抽取若干元素组成新二维数组
JavaScript从二维数组抽取若干元素组成新二维数组
|
4月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
57 1
JavaScript中的原型 保姆级文章一文搞懂
|
8月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
147 2

热门文章

最新文章