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

我制作了一个脚本，将我的“字符”（元素ID =“字符”）移动到我单击的位置。但我需要得到它的位置，所以我可以让它“走路”到我点击的地方，而不是仅仅出现在那里。使用javascript获取元素的水平和垂直位置

这是我的代码：

<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>

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

感谢

来源

2011-05-03 lisovaccaro

我很困惑：'document.getElementById（“character”）.style.left'和'.top'不会给你这些值开头吗？ – 2011-05-03 02:23:30

它取决于该元素的'position'属性。例如，如果它的值是'relative'，那么'left'和'top'属性（如果定义的话）会告诉你该元素相对于它的父元素有多少像素。 – 2011-05-03 02:34:33

我以为document.getElementById（“character”）。style.left只是改变它的位置。我如何打印该值？这将回答我的问题。谢谢 – lisovaccaro 2011-05-03 02:37:08

如果你只需要这个工作在合理的现代浏览器，然后document.getElementById("character").getBoundingClientRect()将有left和top属性，这些属性可以为视口提供偏移量。

来源

2011-05-03 02:47:06

使用MooTools的，你可以得到一个元件与位置：

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

MooTools docs: Element Method: getPosition

来源

2011-05-03 02:31:23

如果OP不使用MooTools，则不太相关。 – alex 2011-05-03 02:34:59

但是，如果想用一种非常好的Javascript框架来寻找解决这个问题的方法，那么它就足够了;） – 2011-05-03 02:36:50

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

回答

相关问题