技术文摘

JavaScript 如何获取坐标

2025-01-09 18:16:59 小编

JavaScript 如何获取坐标

在网页开发中，获取元素的坐标或者鼠标的坐标是常见的需求，JavaScript 提供了多种方式来实现这一功能。

获取元素的坐标

offsetLeft 和 offsetTop

使用 offsetLeft 和 offsetTop 属性可以获取元素相对于其定位父元素的坐标。定位父元素是指设置了 position 为 relative、absolute 或 fixed 的最近祖先元素。例如：

<!DOCTYPE html>
<html>
<head>
    <style>
      .parent {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
      .child {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 50px;
            height: 50px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
    <script>
        const child = document.querySelector('.child');
        console.log('child.offsetLeft:', child.offsetLeft);
        console.log('child.offsetTop:', child.offsetTop);
    </script>
</body>
</html>

上述代码中，child.offsetLeft 和 child.offsetTop 将分别返回 50，即子元素相对于父元素的左偏移和上偏移。

getBoundingClientRect

getBoundingClientRect 方法返回一个 DOMRect 对象，包含元素的大小及其相对于视口的位置信息。该对象有 top、left、right、bottom、width 和 height 等属性。示例如下：

<!DOCTYPE html>
<html>
<head>
    <style>
      .box {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        const box = document.querySelector('.box');
        const rect = box.getBoundingClientRect();
        console.log('rect.left:', rect.left);
        console.log('rect.top:', rect.top);
    </script>
</body>
</html>

这里的 rect.left 和 rect.top 是元素相对于视口左上角的坐标。

获取鼠标的坐标

鼠标事件中的坐标属性

在鼠标事件（如 mousedown、mousemove 等）的事件对象中，包含了鼠标的坐标信息。有 clientX 和 clientY，表示鼠标相对于视口的坐标；pageX 和 pageY，表示鼠标相对于文档的坐标。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            height: 2000px;
        }
    </style>
</head>
<body>
    <script>
        document.addEventListener('mousemove', function (event) {
            console.log('clientX:', event.clientX);
            console.log('clientY:', event.clientY);
            console.log('pageX:', event.pageX);
            console.log('pageY:', event.pageY);
        });
    </script>
</body>
</html>

通过这些属性，我们可以在网页交互中根据鼠标的位置做出相应的操作，比如实现拖放效果等。掌握这些获取坐标的方法，能为网页开发带来更多的交互可能性。

TAGS: JavaScript开发 JavaScript坐标获取 JavaScript获取方法坐标类型

万千站长工具

技术文摘