我想知道如何在 JavaScript中获取 HTML 元素的 Ximg和Y 位置。div
monaung
问问题
1890035 次
29 回答
2190
正确的方法是使用element.getBoundingClientRect()：
var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);
只要您可能关心，Internet Explorer 就一直支持这一点，并且它最终在CSSOM 视图中标准化。所有其他浏览器很久以前就采用了它。
一些浏览器还返回高度和宽度属性，尽管这是非标准的。如果您担心较旧的浏览器兼容性，请检查此答案的修订以获取优化的降级实施。
返回的值element.getBoundingClientRect()是相对于视口的。如果您需要它相对于另一个元素，只需从另一个矩形中减去一个矩形：
var bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
alert('Element is ' + offset + ' vertical pixels from <body>');
于 2012-07-09T14:06:24.990 回答
355
库会竭尽全力获得元素的准确偏移量。
这是一个简单的函数，可以在我尝试过的每种情况下完成这项工作。
function getOffset( el ) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;
于 2009-01-14T10:04:45.700 回答
352
此函数返回元素相对于整个文档（页面）的位置：
function getOffset(el) {
const rect = el.getBoundingClientRect();
return {
left: rect.left + window.scrollX,
top: rect.top + window.scrollY
};
}
使用它我们可以得到 X 位置：
getOffset(element).left
...或Y位置：
getOffset(element).top
于 2015-01-29T18:46:34.720 回答
149
如果您只想在 javascript 中完成，这里有一些 使用的衬垫getBoundingClientRect()
window.scrollY + document.querySelector('#elementId').getBoundingClientRect().top // Y
window.scrollX + document.querySelector('#elementId').getBoundingClientRect().left // X
第一行将返回offsetTop相对于文档的 Y。第二行将返回offsetLeft相对于文档的 X。
getBoundingClientRect()是一个 javascript 函数，它返回元素相对于窗口视口的位置。
于 2018-09-24T10:41:35.573 回答
56
大多数浏览器上的 HTML 元素将具有：-
offsetLeft
offsetTop
这些指定元素相对于其最近的具有布局的父元素的位置。如果有 offsetParent 属性，通常可以访问此父级。
IE和FF3都有
clientLeft
clientTop
这些属性不太常见，它们使用其父客户区域指定元素位置（填充区域是客户区域的一部分，但边框和边距不是）。
于 2009-01-14T09:43:14.387 回答
38
如果页面包含 - 至少 - 任何“DIV”，meouw 给出的函数会抛出超出当前页面限制的“Y”值。为了找到准确的位置，您需要同时处理 offsetParent 和 parentNode。
尝试下面给出的代码（检查 FF2）：
var getAbsPosition = function(el){
var el2 = el;
var curtop = 0;
var curleft = 0;
if (document.getElementById || document.all) {
do {
curleft += el.offsetLeft-el.scrollLeft;
curtop += el.offsetTop-el.scrollTop;
el = el.offsetParent;
el2 = el2.parentNode;
while (el2 != el) {
curleft -= el2.scrollLeft;
curtop -= el2.scrollTop;
el2 = el2.parentNode;
}
} while (el.offsetParent);
} else if (document.layers) {
curtop += el.y;
curleft += el.x;
}
return [curtop, curleft];
};
于 2010-08-12T20:14:33.160 回答
36
您可以添加两个属性来Element.prototype获取任何元素的顶部/左侧。
Object.defineProperty( Element.prototype, 'documentOffsetTop', {
get: function () {
return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
}
} );
Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
get: function () {
return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
}
} );
这被称为：
var x = document.getElementById( 'myDiv' ).documentOffsetLeft;
offset().top这是一个将结果与 jQuery进行比较的演示：http .left: //jsfiddle.net/ThinkingStiff/3G7EZ/
于 2012-01-14T08:57:16.677 回答
26
有效地检索相对于页面的位置，而不使用递归函数：（也包括 IE）
var element = document.getElementById('elementId'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?
document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;
于 2013-07-26T01:49:09.877 回答
23
像这样的事情怎么样，通过传递元素的ID，它会返回left或top，我们也可以将它们组合起来：
1) 找到左边
function findLeft(element) {
var rec = document.getElementById(element).getBoundingClientRect();
return rec.left + window.scrollX;
} //call it like findLeft('#header');
2）找到顶部
function findTop(element) {
var rec = document.getElementById(element).getBoundingClientRect();
return rec.top + window.scrollY;
} //call it like findTop('#header');
或3) 一起找到 left 和 top
function findTopLeft(element) {
var rec = document.getElementById(element).getBoundingClientRect();
return {top: rec.top + window.scrollY, left: rec.left + window.scrollX};
} //call it like findTopLeft('#header');
于 2017-05-22T13:09:51.170 回答
17
jQuery .offset()将获取第一个元素的当前坐标，或者设置匹配元素集中每个元素相对于文档的坐标。
于 2010-08-18T14:43:35.537 回答
13
/**
*
* @param {HTMLElement} el
* @return {{top: number, left: number}}
*/
function getDocumentOffsetPosition(el) {
var position = {
top: el.offsetTop,
left: el.offsetLeft
};
if (el.offsetParent) {
var parentPosition = getDocumentOffsetPosition(el.offsetParent);
position.top += parentPosition.top;
position.left += parentPosition.left;
}
return position;
}
感谢ThinkingStiff的回答，这只是另一个版本。
于 2019-08-29T04:10:50.980 回答
11
我接受了@meouw 的回答，添加到允许边框的clientLeft 中，然后创建了三个版本：
getAbsoluteOffsetFromBody - 类似于@meouw，它获取相对于文档正文或 html 元素的绝对位置（取决于 quirks 模式）
getAbsoluteOffsetFromGivenElement - 返回相对于给定元素 (relativeEl) 的绝对位置。请注意，给定元素必须包含元素 el，否则其行为与 getAbsoluteOffsetFromBody 相同。如果您有两个元素包含在另一个（已知）元素中（可选地，节点树上的几个节点）并希望使它们处于相同位置，这将很有用。
getAbsoluteOffsetFromRelative - 返回相对于第一个具有 position: relative 的父元素的绝对位置。这类似于 getAbsoluteOffsetFromGivenElement，出于同样的原因，但只会到达第一个匹配元素。
getAbsoluteOffsetFromBody = function( el )
{ // finds the offset of el from the body or html element
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
{
_x += el.offsetLeft - el.scrollLeft + el.clientLeft;
_y += el.offsetTop - el.scrollTop + el.clientTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
getAbsoluteOffsetFromGivenElement = function( el, relativeEl )
{ // finds the offset of el from relativeEl
var _x = 0;
var _y = 0;
while( el && el != relativeEl && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
{
_x += el.offsetLeft - el.scrollLeft + el.clientLeft;
_y += el.offsetTop - el.scrollTop + el.clientTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
getAbsoluteOffsetFromRelative = function( el )
{ // finds the offset of el from the first parent with position: relative
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
{
_x += el.offsetLeft - el.scrollLeft + el.clientLeft;
_y += el.offsetTop - el.scrollTop + el.clientTop;
el = el.offsetParent;
if (el != null)
{
if (getComputedStyle !== 'undefined')
valString = getComputedStyle(el, null).getPropertyValue('position');
else
valString = el.currentStyle['position'];
if (valString === "relative")
el = null;
}
}
return { top: _y, left: _x };
}
如果您仍然遇到问题，特别是与滚动有关的问题，您可以尝试查看http://www.greywyvern.com/?post=331 - 我注意到 getStyle 中至少有一段有问题的代码，假设浏览器表现良好，应该没问题，但根本没有测试其余部分。
于 2015-12-01T07:24:49.480 回答
10
这是一个现代的 1-liner 使用 vanilla JS 递归迭代element.offsetTopand element.offsetParent：
功能：
getTop = el => el.offsetTop + (el.offsetParent && getTop(el.offsetParent))
用法：
const el = document.querySelector('#div_id');
const elTop = getTop(el)
优势：
无论当前滚动位置如何，始终返回绝对垂直偏移量。
传统语法：
function getTop(el) {
return el.offsetTop + (el.offsetParent && getTop(el.offsetParent));
}
于 2021-08-16T15:14:47.107 回答
10
小与小的区别
function getPosition( el ) {
var x = 0;
var y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
x += el.offsetLeft - el.scrollLeft;
y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: y, left: x };
}
看一个示例坐标：http: //javascript.info/tutorial/coordinates
于 2016-08-25T15:44:24.167 回答
9
如果您使用的是 jQuery，这可能是一个简单的解决方案：
<script>
var el = $("#element");
var position = el.position();
console.log( "left: " + position.left + ", top: " + position.top );
</script>
于 2013-04-16T04:56:33.163 回答
8
如果使用 jQuery，尺寸插件非常好，可以让您准确指定您想要的内容。
例如
相对位置、绝对位置、不带填充的绝对位置、带填充...
它继续，让我们说你可以用它做很多事情。
加上使用 jQuery 的好处是它的文件大小轻巧且易于使用，以后没有它你就不会回到 JavaScript。
于 2009-01-14T10:24:21.603 回答
7
我发现的最简洁的方法是 jQuery 使用的技术的简化版本offset。与它开头的其他一些答案类似getBoundingClientRect；然后它使用window和documentElement来调整滚动位置以及边缘body（通常是默认值）之类的东西。
var rect = el.getBoundingClientRect();
var docEl = document.documentElement;
var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;
var els = document.getElementsByTagName("div");
var docEl = document.documentElement;
for (var i = 0; i < els.length; i++) {
var rect = els[i].getBoundingClientRect();
var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;
els[i].innerHTML = "<b>" + rectLeft + ", " + rectTop + "</b>";
}div {
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
#rel {
position: relative;
left: 10px;
top: 10px;
}
#abs {
position: absolute;
top: 250px;
left: 250px;
}<div id="rel"></div>
<div id="abs"></div>
<div></div>于 2014-11-04T14:17:15.927 回答
7
要获得元素的总偏移量，您可以递归地总结所有父偏移量：
function getParentOffset(el): number {
if (el.offsetParent) {
return el.offsetParent.offsetTop + getParentOffset(el.offsetParent);
} else {
return 0;
}
}
使用此实用函数，dom 元素的总顶部偏移量为：
el.offsetTop + getParentOffset(el);
于 2019-03-01T13:56:36.970 回答
6
这是我设法创建的最好的代码（也适用于 iframe，与 jQuery 的 offset() 不同）。似乎 webkit 有一点不同的行为。
根据 meouw 的评论：
function getOffset( el ) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
// chrome/safari
if ($.browser.webkit) {
el = el.parentNode;
} else {
// firefox/IE
el = el.offsetParent;
}
}
return { top: _y, left: _x };
}
于 2011-09-10T17:05:08.647 回答
6
虽然这很可能在这么多答案的底部丢失，但这里的顶级解决方案对我不起作用。
据我所知，其他任何答案都没有帮助。
情况：
在 HTML5 页面中，我有一个菜单，它是标题内的导航元素（不是标题，而是另一个元素中的标题）。
一旦用户滚动到它，我希望导航保持在顶部，但在此之前，标题是绝对定位的（所以我可以让它稍微覆盖其他东西）。
上面的解决方案从未触发更改，因为 .offsetTop 不会更改，因为这是一个绝对定位的元素。此外， .scrollTop 属性只是最顶部元素的顶部......也就是说 0 并且始终为 0。
我使用这两个执行的任何测试（与 getBoundingClientRect 结果相同）都不会告诉我导航栏的顶部是否曾经滚动到可查看页面的顶部（再次，如控制台中所报告的，它们在滚动时只是保持相同的数字发生了）。
解决
方案我的解决方案是利用
window.visualViewport.pageTop
pageTop 属性的值反映了屏幕的可视部分，因此允许我跟踪元素相对于可视区域边界的位置。
可能没必要说，每当我处理滚动时，我都希望使用此解决方案以编程方式响应被滚动元素的移动。
希望它可以帮助别人。
重要提示：这似乎目前在 Chrome 和 Opera 中有效，并且绝对不适用于 Firefox（6-2018） ......直到 Firefox 支持 visualViewport 我建议不要使用这种方法，（我希望他们很快就会这样做......比其他的更有意义）。
更新：
只是有关此解决方案的说明。
虽然我仍然发现我发现对于“......以编程方式响应正在滚动的元素的移动”的情况非常有价值。适用。我遇到的问题的更好解决方案是使用 CSS 来设置位置：sticky在元素上。使用粘性，您可以在不使用 javascript 的情况下使元素保持在顶部（注意：有时这不会像将元素更改为固定那样有效，但对于大多数用途而言，粘性方法可能会更好）
UPDATE01：
所以我意识到对于不同的页面，我有一个要求，我需要在一个稍微复杂的滚动设置中检测元素的位置（视差加上作为消息的一部分滚动过去的元素）。在那种情况下，我意识到以下提供了我用来确定何时做某事的价值：
let bodyElement = document.getElementsByTagName('body')[0];
let elementToTrack = bodyElement.querySelector('.trackme');
trackedObjPos = elementToTrack.getBoundingClientRect().top;
if(trackedObjPos > 264)
{
bodyElement.style.cssText = '';
}
希望这个答案现在更广泛有用。
于 2017-10-24T19:23:22.570 回答
5
我这样做是为了与旧浏览器交叉兼容。
// For really old browser's or incompatible ones
function getOffsetSum(elem) {
var top = 0,
left = 0,
bottom = 0,
right = 0
var width = elem.offsetWidth;
var height = elem.offsetHeight;
while (elem) {
top += elem.offsetTop;
left += elem.offsetLeft;
elem = elem.offsetParent;
}
right = left + width;
bottom = top + height;
return {
top: top,
left: left,
bottom: bottom,
right: right,
}
}
function getOffsetRect(elem) {
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop;
var clientLeft = docElem.clientLeft;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
var bottom = top + (box.bottom - box.top);
var right = left + (box.right - box.left);
return {
top: Math.round(top),
left: Math.round(left),
bottom: Math.round(bottom),
right: Math.round(right),
}
}
function getOffset(elem) {
if (elem) {
if (elem.getBoundingClientRect) {
return getOffsetRect(elem);
} else { // old browser
return getOffsetSum(elem);
}
} else
return null;
}
更多关于 JavaScript 坐标的信息：http: //javascript.info/tutorial/coordinates
于 2015-03-15T12:11:11.583 回答
5
HTML program to show (x, y) of an
element by dragging mouse over it you just copied it and use it on your own
<!DOCTYPE html>
<html>
<head>
<title>
position of an element
</title>
<!-- scropt to get position -->
<script type = "text/javascript">
function getPositionXY(element) {
var rect = element.getBoundingClientRect();
document.getElementById('text').innerHTML
= 'X: ' + rect.x + '<br>' + 'Y: ' + rect.y;
}
</script>
</head>
<body>
<p>Move the mouse over the text</p>
<div onmouseover = "getPositionXY(this)">
Position:
<p id = 'text'></p>
</div>
</body>
</html> 于 2021-05-23T18:13:36.520 回答
2
我成功地使用了 Andy E 的解决方案来定位引导程序 2 模式，具体取决于用户单击表格行中的链接。该页面是 Tapestry 5 页面，下面的 javascript 被导入到 java 页面类中。
javascript:
function setLinkPosition(clientId){
var bodyRect = document.body.getBoundingClientRect(),
elemRect = clientId.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
offset = offset + 20;
$('#serviceLineModal').css("top", offset);
}
我的模态代码：
<div id="serviceLineModal" class="modal hide fade add-absolute-position" data-backdrop="static"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top:50%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<t:zone t:id="modalZone" id="modalZone">
<p>You selected service line number: ${serviceLineNumberSelected}</p>
</t:zone>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<!-- <button class="btn btn-primary">Save changes</button> -->
</div>
循环中的链接：
<t:loop source="servicesToDisplay" value="service" encoder="encoder">
<tr style="border-right: 1px solid black;">
<td style="white-space:nowrap;" class="add-padding-left-and-right no-border">
<a t:type="eventLink" t:event="serviceLineNumberSelected" t:context="service.serviceLineNumber"
t:zone="pageZone" t:clientId="modalLink${service.serviceLineNumber}"
onmouseover="setLinkPosition(this);">
<i class="icon-chevron-down"></i> <!-- ${service.serviceLineNumber} -->
</a>
</td>
以及页面类中的java代码：
void onServiceLineNumberSelected(String number){
checkForNullSession();
serviceLineNumberSelected = number;
addOpenServiceLineDialogCommand();
ajaxResponseRenderer.addRender(modalZone);
}
protected void addOpenServiceLineDialogCommand() {
ajaxResponseRenderer.addCallback(new JavaScriptCallback() {
@Override
public void run(JavaScriptSupport javascriptSupport) {
javascriptSupport.addScript("$('#serviceLineModal').modal('show');");
}
});
}
希望这对某人有所帮助，这篇文章有所帮助。
于 2014-10-23T15:02:06.943 回答
1
只是想我也会把这个扔出去。
我无法在较旧的浏览器中对其进行测试，但它适用于最新的前 3 名浏览器。:)
Element.prototype.getOffsetTop = function() {
return ( this.parentElement )? this.offsetTop + this.parentElement.getOffsetTop(): this.offsetTop;
};
Element.prototype.getOffsetLeft = function() {
return ( this.parentElement )? this.offsetLeft + this.parentElement.getOffsetLeft(): this.offsetLeft;
};
Element.prototype.getOffset = function() {
return {'left':this.getOffsetLeft(),'top':this.getOffsetTop()};
};
于 2014-10-12T10:57:36.440 回答
1
经过大量研究和测试，这似乎有效
function getPosition(e) {
var isNotFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') == -1);
var x = 0, y = 0;
while (e) {
x += e.offsetLeft - e.scrollLeft + (isNotFirefox ? e.clientLeft : 0);
y += e.offsetTop - e.scrollTop + (isNotFirefox ? e.clientTop : 0);
e = e.offsetParent;
}
return { x: x + window.scrollX, y: y + window.scrollY };
}
于 2015-06-17T20:48:24.567 回答
1
这很简单，就像 JS 中的两行代码一样：
var elem = document.getElementById("id");
alert(elem.getBoundingClientRect());
于 2020-07-18T06:36:51.047 回答
0
由于不同的浏览器以不同的方式呈现边框、填充、边距等。我写了一个小函数来检索您想要精确尺寸的每个根元素中特定元素的顶部和左侧位置：
function getTop(root, offset) {
var rootRect = root.getBoundingClientRect();
var offsetRect = offset.getBoundingClientRect();
return offsetRect.top - rootRect.top;
}
要检索左侧位置，您必须返回：
return offsetRect.left - rootRect.left;
于 2015-01-08T17:42:16.023 回答
-2
获取 div 相对于 left 和 Top 的位置
var elm = $('#div_id'); //get the div
var posY_top = elm.offset().top; //get the position from top
var posX_left = elm.offset().left; //get the position from left
于 2018-04-09T19:50:09.407 回答