페이지에 있는 모든 링크의 좌표 찾기

Question

자바스크립트에서:웹페이지에 있는 모든 링크의 좌표(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

제이쿼리 없이:

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

x 및 y 값을 얻으려면 이 페이지를 사용해 보세요.http://blogs.korzh.com/progtips/2008/05/28/absolute-coordinates-of-dom-element-within-document.html

그러나 이미지나 이와 유사한 것을 추가하려는 경우 a:after CSS 선택기를 사용하는 것이 좋습니다.

Answer 3

일반 자바스크립트:

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

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