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