查找頁面中每個鏈接的座標

Question

使用Javascript： 如何找到網頁中每個鏈接的座標（x，y，高度，寬度）？

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得到x和y值： http://blogs.korzh.com/progtips/2008/05/28/absolute-coordinates-of-dom-element-within-document.html

但是，如果你想添加一個圖像或類似的東西，我建議使用a：之後的CSS選擇器。

Answer 4

普通的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); 
});