Trouver les coordonnées de chaque lien dans une page

Question

En Javascript: Comment peut-on trouver les coordonnées (x, y, hauteur, largeur) de chaque lien dans une page Web?

Answer 1

En utilisant jQuery, il est aussi simple que:

$("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

Avec 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

sans jquery:

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

essayer cette page pour une func pour obtenir x et y valeurs: http://blogs.korzh.com/progtips/2008/05/28/absolute-coordinates-of-dom-element-within-document.html

Cependant, si vous essayez d'ajouter une image ou quelque chose de similaire, je vous suggère d'utiliser le sélecteur a: after css.

Answer 4

JavaScript Plaine:

function getAllChildren (node, tag) { 
    return [].slice.call(node.getElementsByTagName(tag)); 
} 
function offset(element){ 
    var rect = element.getBoundingClientRect(); 
    var docEl = doc.documentElement; 
    return { 
    left: rect.left + window.pageXOffset - docEl.clientLeft, 
    top: rect.top + window.pageYOffset - docEl.clientTop, 
    width: element.offsetWidth, 
    height: element.offsetHeight 
    }; 
} 

var links = getAllChildren(document.body, 'a'); 
links.forEach(function(link){ 
    var offset_node = offset(node); 
    console.info(offset_node); 
});