Найти координаты каждой ссылки на странице

Question

В Javascript: Как найти координаты (x, y, height, width) каждой ссылки на веб-странице?

Answer 1

Использование JQuery, это так просто, как:

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

С 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

без JQuery:

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

попробовать эту страницу для FUNC, чтобы получить х и y: http://blogs.korzh.com/progtips/2008/05/28/absolute-coordinates-of-dom-element-within-document.html

Однако, если вы пытаетесь добавить изображение или что-то подобное, я бы предложил использовать селектор a: after css.

Answer 4

Plain JavaScript:

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); 
});