如何使用jQuery找到所有超链接元素的绝对位置?

How do I find the absolute position of all hyperlink elements using jQuery?

本文关键字：元素 位置 超链接 jQuery 何使用      更新时间：2023-09-26

我想获得所有html超链接元素的绝对位置。我编写了一个jquery来查找每个链接元素的绝对位置，如下所示:

jQuery('a').each(function() {
    var elLink = jQuery(this);
    console.log(this.text + ' => ' + this.href + ' ' + JSON.stringify(elLink.offset()) + ' top:' + elLink.css('top') + ' left:' + elLink.css('left'))
});

然而，它不起作用。例如，在http://www.actuino.fr页面上，有一个名为"Le Crawler"的链接会给我top = 0和left = 0，而"Contact"链接会给我正确的位置。不是所有链接都是隐藏的。

那么我怎样才能得到这些链接的绝对位置呢?谢谢你！

我不认为获得任何元素的.offset()应该有任何问题，无论是绝对的，相对的，固定的还是静态的定位。

但有一点需要注意:

在下面的例子中，我有三个锚，其中一个是隐藏的，尽管它是绝对定位的，但是top,left被浏览器赋值为0。

jQuery('a').each(function() {
    var elLink = jQuery(this);
    $(document.body).append('<pre>'+this.href + ':::<--href:::.offset():::-->' + JSON.stringify(elLink.offset()) +'</pre>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#123' style='margin:40px 0 0 80px;'>link 1</a>
<a href='#456' style='position:absolute; right:0; bottom:50px;'>link 2</a>
<a href='#789' style='display:none; position:absolute; left:0; bottom:50px;'>link 2</a>

相关文章：