Question

我制作了一个脚本，将我的“字符”（元素ID =“字符”）移动到我点击的位置。但我需要得到它的位置，这样我才能“走”到我点击的地方，而不是只是出现在那里。

这是我的代码：

<html>
<head>
<script type="text/javascript">
function showCoords(evt){
  document.getElementById("character").style.left = evt.pageX;
  document.getElementById("character").style.top = evt.pageY;
}
</script>
</head>

<body onmousedown="showCoords(event)">
<div id="character" style="position: absolute; top: 100px; width: 80px; height: 40px; background:black;"> Char </div>
</body>
</html>

基本上我只想在函数开头检索元素的水平和垂直位置。所以我以后可以使用这些变量。我该怎么做？

由于

Answer 1

如果您只需要在合理的现代浏览器中使用此功能，那么document.getElementById("character").getBoundingClientRect()将具有left和top属性，可以为您提供视口的偏移量。

Answer 2

使用MooTools可以获得元素的位置：

$('element').getPosition(); // returns {x: 100, y: 500};

MooTools docs: Element Method: getPosition

使用javascript获取元素的水平和垂直位置

2 个答案: