Question

我需要根据屏幕找到html元素的绝对坐标。我知道我可以使用getBoundingClientRect（）。top和getBoundingClientRect（）。left方法根据视口来计算坐标。我如何找到绝对坐标？另一个问题是window.screenX是否考虑了url和tab bar？感谢帮助。

Answer 1

更新

添加了一项特殊测量：

var offset = window.outerHeight - window.innerHeight

这是浏览器栏顶部（或视口顶部）的浏览器顶部。名为UselessXY的新坐标取得了浏览器栏的高度，并将其添加到Y坐标。如果调整浏览器大小，则需要刷新它以获得新的偏移量。如果浏览器最大化，这种方法效果最佳。

我制作了一个显示clientX，clientY，screenX和screenY的功能。并offset和uselessXY 只需点击任意位置即可获得坐标。

段

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>COORDS</title>
<style>
*, *:before, *:after { margin: 0; padding: 0; }
body { width: 100vw; height: 100vh; position: relative; }
#display { width: 40ex; height: 50px; border: 1px solid grey; padding: 3px; position: absolute; }
</style>
</head>

<body onmousedown="coords(event)">
<figure id="display" onmouseover="this.style.left = '50%'" onclick="this.style.left = '0'">
<figcaption><u>Coordinates(X,Y)</u></figcaption>
<output id="xy"></output>
</figure>


<script>

function coords(evt) {
	document.getElementById('xy').textContent = "screenXY: " + evt.screenX + ", " + evt.screenY +" | clientXY: " + evt.clientX + ", " + evt.clientY+" | Offset: "+offset+" | UselessXY: "+evt.screenX+", "+(evt.screenY + offset);
}

var offset = window.outerHeight - window.innerHeight;

</script>
</body>
</html>

＆＃13;

Answer 2

我如何找到绝对坐标？

使用offsetTop

假设元素的id是

var d = document.getElementById("socialChange");
var topPos = d.offsetTop;

另一个问题是window.screenX是否考虑了url和tab 酒吧考虑到了吗？

不，请查看文档here。浏览器控件所涵盖的区域被排除在window.screenX和window.screenY之外。

Answer 3

x_axis = window.screenX +（window.outerWidth - window.innerWidth）+ element.getBoundingClientRect（）。left

以上将获得屏幕左侧的绝对长度。可以对y轴进行类似的情况。

从概念的角度来看，可以使用这张图片。

如何找到html元素的绝对坐标？

3 个答案:

更新

段