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

标签 javascript

我制作了一个脚本,将我的“Angular 色”(元素 ID=“Angular 色”)移动到我单击的位置。但我需要获取它的位置,这样我就可以让它“走到”我点击的地方,而不是仅仅出现在那里。

这是我的代码:

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

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

谢谢

最佳答案

如果您只需要它在相当现代的浏览器中工作,那么 document.getElementById("character").getBoundingClientRect() 将具有 lefttop 属性为您提供距视口(viewport)的偏移量。

关于javascript - 使用javascript获取元素的水平和垂直位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5864423/

相关文章:

javascript - 循环返回数组的最后一项

javascript - 服务端可观察数据最初不会在组件 Angular 中更新

javascript - onclick 期间无法从 javascript 对象获取值(返回未定义)

javascript - 将基于数据的格式添加到 FullCalendar jquery 插件事件

javascript - 在悬停时设置两个 div 的样式

javascript - echo 不适用于不刷新页面的 ajax 调用

javascript - 从自定义 Shopify 应用将 JavaScript 添加到 Shopify 模板

javascript - Angular 2 自定义数据验证 - 改变风格

javascript - Javascript循环错误无限循环

javascript - 两个相同的功能,但只有一个触发