JavaScript检索HTML元素相对于浏览器窗口的位置（X，Y）
我想知道如何相对于浏览器窗口获取HTML元素（例如img和div在JavaScript中）的X和Y位置。
问题答案：
正确的方法是使用element.getBoundingClientRect()：
var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);
Internet Explorer自从你很可能就一直在支持此功能，并且最终在CSSOM Views中对其进行了标准化。所有其他浏览器很早以前就采用了它。
一些浏览器还返回height和width属性，尽管这是非标准的。如果你担心与旧版浏览器的兼容性，请查看此答案的修订版以实现优化的降级实现。
返回的值element.getBoundingClientRect()是相对于视口的。如果你需要相对于另一个元素的矩形，只需从另一个矩形中减去一个矩形：
var bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
alert('Element is ' + offset + ' vertical pixels from <body>');
-
我有一个表和一个div，我想使用position（）将div相对于表单元格放置： 如果td1在窗口内（无水平滚动），则div放置正确。但是，如果桌子比窗口宽，则div放置错误（推到左侧）-位置（）。top是正确的，但position（）。左侧是这样的：div将完全位于窗口内。我试着把桌子放在一个足够宽（比窗户宽）的div里，但我仍然看到同样的行为。 关于如何正确定位div相对于窗口之外的元素的任何
-
问题内容： 有谁知道我可以使用JavaScript检查浏览器窗口何时关闭并弹出确认对话框询问用户是否确认退出浏览器还是改变主意的任何方式？ 问题答案： window.onbeforeunload = function (e) { var e = e || window.event;
-
问题内容： 如何在浏览器窗口（不是页面，不是屏幕）的中间放置一些HTML元素（例如，a ）？不取决于浏览器窗口的大小，屏幕分辨率，工具栏布局等。例如，我希望它位于 浏览器窗口 的中间。 问题答案： 令我惊讶的是，没有人说固定位置。自7以来，它完全符合我的要求，并且可以在所有“人类”浏览器和IE中使用。
-
问题内容： 在哪里可以找到浏览器的HTML元素默认CSS？ 许多HTML元素都带有一些默认的CSS属性，这些属性有时会导致未知/有害的行为。例如，输入框在不同浏览器中的显示方式有所不同。我正在寻找一个涵盖新CSS3属性和新HTML5元素的地方。 我在其他（较旧的）问题（例如浏览器的默认CSS样式表中看到了答案，这些问题提出了CSS重置的解决方案。有时不需要这种解决方案，通常我实际上想保留一些基本属
-
问题内容： 我希望找到一种方法来获取当前可见窗口的位置（相对于总页面宽度/高度），以便可以将其强制从一个部分滚动到另一部分。但是，要猜测哪个对象对您的浏览器拥有真正的X / Y，似乎有很多选择。 为了确保IE 6 +，FF 2+和Chrome / Safari能正常工作，我需要选择以下哪两项？ 还有其他吗？一旦知道窗口在哪里，就可以设置一个事件链，该事件链将缓慢调用直到到达所需的位置。 问题答案：
-
问题内容： 我想使用画布制作一个绘画应用程序。所以我需要找到鼠标在画布上的位置。 问题答案： 对于使用JQuery的人： 有时，当您拥有嵌套元素时，其中一个元素会附加事件，这可能会使您难以理解浏览器将其视为父级。在这里，您可以指定哪个父级。 您采用鼠标位置，然后从父元素的偏移位置中减去它。 如果要在滚动窗格内的页面上获取鼠标位置： 或相对于页面的位置： 请注意以下性能优化： 这样，JQuery不必