Find coordinates of every link in a page

Question

In Javascript: How does one find the coordinates (x, y, height, width) of every link in a webpage?

Answer 1

Using jQuery, it's as simple as:

$("a").each(function() {
    var link = $(this);
    var top = link.offset().top;
    var left = link.offset().left;
    var width = link.offset.width();
    var height = link.offset.height();
});

Answer 2

With jQuery:

$j('a').each( findOffset );

function findOffset()
{
    alert
    ( 'x=' + $j(this).offset().left
    + ' y=' + $j(this).offset().top
    + ' width=' + $j(this).width()
    + ' height=' + $j(this).height()
    );
}

Answer 3

without jquery:

var links = document.getElementsByTagName("a");
for(var i in links) {
    var link = links[i];
    console.log(link.offsetWidth, link.offsetHeight);
}

try this page for a func to get the x and y values: http://blogs.korzh.com/progtips/2008/05/28/absolute-coordinates-of-dom-element-within-document.html

However, if you're trying to add an image or something similar, I'd suggest using the a:after css selector.