페이지에 있는 모든 링크의 좌표 찾기
-
09-06-2019 - |
문제
자바스크립트에서:웹페이지에 있는 모든 링크의 좌표(x, y, 높이, 너비)를 어떻게 찾나요?
해결책
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();
});
다른 팁
제이쿼리 없이:
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 선택기를 사용하는 것이 좋습니다.
일반 자바스크립트:
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);
});
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()
);
}
제휴하지 않습니다 StackOverflow