Question

给定一个点的屏幕坐标，是否有某种方法可以在浏览器的实际页面上计算该点的坐标？

这是个小问题的图像。我有一个Point（ScreenX，ScreenY），想将其转换为Point（PageX，PageY）。

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

感谢Anny的帮助:-)

Answer 1

#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

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

1 个答案: