查找页面中每个链接的坐标

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

【讨论】:

以上是关于查找页面中每个链接的坐标的主要内容,如果未能解决你的问题,请参考以下文章

页面的链接和该子页面的链接。递归/线程

怎么用经纬度查找自己在地图中的位置?

如何查找网站上的所有链接/页面

有没有办法将元素链接转换为 XPath

PHP 查找页面上的所有链接

PHP 查找页面上的所有链接