blocks|key|1689838|text|此函数将告诉您元素相对于页面的x，y位置。基本上，您必须遍历元素的所有父元素，并将它们的偏移量相加在一起。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1689839|function+getPos(el)+{
++++//+yay+readability
++++for+(var+lx=0,+ly=0;
+++++++++el+!=+null;
+++++++++lx+%2B=+el.offsetLeft,+ly+%2B=+el.offsetTop,+el+=+el.offsetParent);
++++return+{x:+lx,y:+ly};
}|code-block|syntax|javascript|1689840|但是，如果您只需要元素相对于其容器的x，y位置，那么您所需要的就是：|1689841|var+x+=+el.offsetLeft,+y+=+el.offsetTop;|1689842|要将一个元素放在这个元素的正下方，您还需要知道它的高度。它存储在offsetHeight/offsetWidth属性中。|1689843|var+yPositionOfNewElement+=+el.offsetTop+%2B+el.offsetHeight+%2B+someMargin;|1689844|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

This function will tell you the x,y position of the element relative to the page. Basically you have to loop up through all the element's parents and add their offsets together.

<pre><code>function getPos(el) {
 // yay readability
 for (var lx=0, ly=0;
 el != null;
 lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
 return {x: lx,y: ly};
}
</code></pre>

However, if you just wanted the x,y position of the element relative to its container, then all you need is:

<pre><code>var x = el.offsetLeft, y = el.offsetTop;
</code></pre>

To put an element directly below this one, you'll also need to know its height. This is stored in the offsetHeight/offsetWidth property.

<pre><code>var yPositionOfNewElement = el.offsetTop + el.offsetHeight + someMargin;
</code></pre>

blocks|key|1474900|text|可以在对元素的引用上调用方法getBoundingClientRect()。然后，您可以检查top、left、right和/或bottom属性...|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1474901|var+offsets+=+document.getElementById('11a').getBoundingClientRect();
var+top+=+offsets.top;
var+left+=+offsets.left;|code-block|syntax|javascript|1474902|如果使用jQuery，您可以使用更简洁的代码...|1474903|var+offsets+=+$('#11a').offset();
var+top+=+offsets.top;
var+left+=+offsets.left;|1474904|entityMap^0|E|N|1A|3|1E|4|1J|5|1R|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|P|$]]

You can call the method <code>getBoundingClientRect()</code> on a reference to the element. Then you can examine the <code>top</code>, <code>left</code>, <code>right</code> and/or <code>bottom</code> properties...

<pre><code>var offsets = document.getElementById('11a').getBoundingClientRect();
var top = offsets.top;
var left = offsets.left;
</code></pre>

If using jQuery, you can use the more succinct code...

<pre><code>var offsets = $('#11a').offset();
var top = offsets.top;
var left = offsets.left;
</code></pre>

blocks|key|1474962|text|正如Alex所指出的，您可以使用jQuery+offset()来获取相对于文档流的位置。使用position()作为其相对于父对象的x，y坐标。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1474963|编辑:切换了window.load的document.ready，因为load会等待所有元素，所以您可以获得它们的大小，而不是简单地准备DOM。根据我的经验，load会减少错误定位的元素。|offset|length|style|CODE|1474964|$(window).load(function(){+
++//+Log+the+position+with+jQuery
++var+position+=+$('#myDivInQuestion').position();
++console.log('X:+'+%2B+position.left+%2B+",+Y:+"+%2B+position.top+);
});|code-block|syntax|javascript|1474965|entityMap^0|0|6|B|I|E|Z|4|27|4|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]|$D|S|E|T|F|G]|$D|U|E|V|F|G]|$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|N|$]]

As Alex noted you can use jQuery offset() to get the position relative to the document flow. Use position() for its x,y coordinates relative to the parent.

EDIT: Switched <code>document.ready</code> for <code>window.load</code> because <code>load</code> waits for all of the elements so you get their size instead of simply preparing the DOM. In my experience, <code>load</code> results in fewer incorrectly Javascript positioned elements.

<pre><code>$(window).load(function(){ 
 // Log the position with jQuery
 var position = $('#myDivInQuestion').position();
 console.log('X: ' + position.left + ", Y: " + position.top );
});
</code></pre>

blocks|key|1690011|text|对于任何只需要顶部或左侧位置的人来说，对@Nickf的可读代码稍作修改就可以解决问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1690012|function+getTopPos(el)+{
++++for+(var+topPos+=+0;
++++++++el+!=+null;
++++++++topPos+%2B=+el.offsetTop,+el+=+el.offsetParent);
++++return+topPos;
}|code-block|syntax|javascript|1690013|和|1690014|function+getLeftPos(el)+{
++++for+(var+leftPos+=+0;
++++++++el+!=+null;
++++++++leftPos+%2B=+el.offsetLeft,+el+=+el.offsetParent);
++++return+leftPos;
}|1690015|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

For anyone needing just top or left position, slight modifications to @Nickf's readable code does the trick.

<pre><code>function getTopPos(el) {
 for (var topPos = 0;
 el != null;
 topPos += el.offsetTop, el = el.offsetParent);
 return topPos;
}
</code></pre>

and

<pre><code>function getLeftPos(el) {
 for (var leftPos = 0;
 el != null;
 leftPos += el.offsetLeft, el = el.offsetParent);
 return leftPos;
}
</code></pre>

blocks|key|1690086|text|我知道这是一个老帖子，但是@alex的答案需要标记为正确答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1690087|element.getBoundingClientRect()与jQuery的$(element).offset()完全匹配|offset|length|style|CODE|1690088|并且它与IE4%2B兼容...+https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect|1690089|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect^0|0|0|V|13|J|0|E|26|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]|$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

I realize this is an old thread, but @alex 's answer needs to be marked as the correct answer

<code>element.getBoundingClientRect()</code> is an exact match to jQuery's <code>$(element).offset()</code>

And it's compatible with IE4+ ...
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect</a>

blocks|key|1475101|text|而@nickf的答案是有效的。如果你不喜欢老版本的浏览器，你可以使用这个纯Javascript版本。在IE9%2B和其他应用程序中工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1475102|var+rect+=+el.getBoundingClientRect();

var+position+=+{
++top:+rect.top+%2B+window.pageYOffset,
++left:+rect.left+%2B+window.pageXOffset
};|code-block|syntax|javascript|1475103|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

While @nickf's answer works. If you don't care for older browsers, you can use this pure Javascript version. Works in IE9+, and others

<pre><code>var rect = el.getBoundingClientRect();

var position = {
 top: rect.top + window.pageYOffset,
 left: rect.left + window.pageXOffset
};
</code></pre>

Can someone show me how to get the <code>top</code> &amp; <code>left</code> position of a <code>div</code> or <code>span</code> element when one is not specified?
ie:
<pre><code>&lt;span id='11a' style='top:55px;' onmouseover=&quot;GetPos(this);&quot;&gt;stuff&lt;/span&gt;
&lt;span id='12a' onmouseover=&quot;GetPos(this);&quot;&gt;stuff&lt;/span&gt;
</code></pre>
In the above, if I do:
<pre><code>document.getElementById('11a').style.top
</code></pre>
The value of <code>55px</code> is returned. However, if I try that for <code>span</code> '12a', then nothing gets returned.
I have a bunch of <code>div</code>/<code>span</code>s on a page that I cannot specify the <code>top</code>/<code>left</code> properties for, but I need to display a <code>div</code> directly under that element.

Get the position of a div/span tag

容器

jQuery

谁能告诉我，当一个div或span元素没有被指定时，如何获取它的top & left位置？即：stuff<span id='12a' onmouseover="GetPos(this)...

问获取div/span标记的位置
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取div/span标记的位置EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取div/span标记的位置
EN