Javascript元素相对于屏幕的位置

Javascript element position relative to screen

本文关键字：位置 屏幕 相对于 元素 Javascript      更新时间：2023-09-26

我需要获取元素相对于屏幕或窗口左上角的位置（点（window.screenX，window.screen Y）.

为什么？我需要桌面应用程序在这个位置上绘制一些东西。我可以获得整个窗口和文档的矩形，但无法获得窗口顶部和文档顶部之间的偏移量。

如果用户打开了浏览器的调试控制台，则使用window.outerHeight - window.innerHeight是不起作用的。

有什么想法吗？SP上有一些关于它的文章，但所有这些文章都对我来说是相对于文档的视图端口有效的

编辑：其他可能的解决方案是，获得文件的屏幕X/Y值

感谢

如果你不反对使用插件，jquery有.position（）方法，这样你就可以为文档做

更新解决方案

// get element position relative to the document
var pos = $("#element").position();
var elePosX = pos.left;
var elePosY = pos.top;
// get window position relative to screen
var winPosX = window.screenX;
var winPosY = window.screenY;
// calculate the height of the navigation/toolbar
var navHeight = window.outerHeight - window.innerHeight;
// absolute x relative to the screens top left is the
//windows x position + the elements x position
var absX = winPosX + elePosX;
// absolute y relative to the screens top left is the
// windows y position + the height of the nav bar + the
// elements y position
var absY = winPosY + navHeight + elePosY;
// output values
console.log({"x": absX, "y": absY});

我一直在寻找同样的东西，令人惊讶的是，这很难实现。

有一个仅适用于Firefox的解决方案——window.mozInnerScreenX和window.mozInnerScreenY将为您提供相对于屏幕的视口的左侧和顶部。

对于其他浏览器，据我所知，您需要监听第一个鼠标或触摸事件。这些事件包含事件的屏幕坐标和客户端坐标，可用于计算视口的屏幕坐标。

innerScreenX = event.screenX - event.clientX;
innerScreenY = event.screenY - event.clientY;

请注意，在多监视器设置的情况下，屏幕坐标可能是意外值（如-ve值）。

您可能需要查看窗口的以下属性。。。

window.screen.top-返回距当前屏幕顶部的距离（以像素为单位）。windows.screen.left-返回从主屏幕左侧到当前屏幕左侧的距离（以像素为单位）。

相关文章：