查找页面中每个链接的坐标
Posted
技术标签:
【中文标题】查找页面中每个链接的坐标【英文标题】:Find coordinates of every link in a page 【发布时间】:2010-09-09 05:13:49 【问题描述】:在 javascript 中: 如何找到网页中每个链接的坐标(x、y、高度、宽度)?
【问题讨论】:
【参考方案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();
);
【讨论】:
【参考方案2】:没有 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:after css 选择器。
【讨论】:
【参考方案3】:纯 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);
);
【讨论】:
【参考方案4】:使用 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()
);
【讨论】:
以上是关于查找页面中每个链接的坐标的主要内容,如果未能解决你的问题,请参考以下文章