gpt4 book ai didi

javascript - 将屏幕坐标转换为页面坐标

转载 作者:行者123 更新时间:2023-11-28 02:28:14 27 4
gpt4 key购买 nike

给定一个点的屏幕坐标,有什么方法可以计算出该点在浏览器实际页面上的坐标吗? Here is a small image illustrating the problem

这是一张说明问题的小图片。我有一个点 (ScreenX,ScreenY) 并想将其转换为点 (PageX,PageY)。

据我所知,无法计算浏览器工具栏等的高度,因此 window.innerHeight 和 window.outerHeight 在这里没有真正帮助。

感谢 Anny 的帮助:-)

最佳答案

#div-id {
border: 1px solid red;
width: 100px;
height: 100px;
display: inline-block;
position: absolute;
left: 100px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>

<div id="div-id"> POSITION </div>

<script>
var element = document.getElementById('div-id');
var position = element.getBoundingClientRect();
var x = position.left;
var y = position.top;

var XLoc = window.screenX;
var YLoc = window.screenY;
var toolbarHeight = window.outerHeight - window.innerHeight;

console.log('Div position : X :', x ,'--Y : ', y);


console.log('Window position: X:', XLoc ,'-- Y : ', YLoc);

console.log('Actual position of DIV from scrren - X:', (x + XLoc) ,'-- Y : ', ( y + YLoc + toolbarHeight ) );

</script>
</body>
</html>

使用以下属性满足要求。

window.screenX

window.screenY

关于javascript - 将屏幕坐标转换为页面坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52604914/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com