728x90
[Front-End / Javascript] 브라우저 엘리먼트 좌표 값 구하기
기본 형태
elem.getBoundingClientRect();
객체 구조
elem.getBoundingClientRect().x : 현재 창기준 x좌표
elem.getBoundingClientRect().y : 현재 창기준 y좌표
elem.getBoundingClientRect().width : 엘리먼트 가로
elem.getBoundingClientRect().height : 엘리먼트 세로
elem.getBoundingClientRect().top : 현재 창기준 세로 시작점 부터 엘리먼트 윗변 까지의 거리
elem.getBoundingClientRect().left : 현재 창기준 가로 시작점 부터 엘리먼트 왼쪽변 까지의 거리
elem.getBoundingClientRect().right : 현재 창기준 가로 시작점 부터 엘리먼트 오른쪽변 까지의 거리
elem.getBoundingClientRect().bottom : 현재 창기준 세로 시작점 부터 엘리먼트 아래변 까지의 거리
샘플 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Client X,Y / Page X,Y</title>
<style>
.items {
text-align: center;
background-color: #ffe268;
width: 320px;
}
.item {
display: inline-block;
width: 300px;
height: 300px;
margin: 5px;
}
.item1 {
background-color: #ffaaa7;
}
.item2 {
background-color: #d5ecc2;
}
.item3 {
background-color: #98ddca;
}
.item4 {
background-color: #b8b5ff;
}
.item5 {
background-color: #7868e6;
}
</style>
</head>
<body>
<div class="items">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
</div>
<script>
document.querySelector('.item3').addEventListener('click', e => {
let rect = e.target.getBoundingClientRect();
console.log(`현재 창기준 x좌표 : ${rect.x}px`);
console.log(`현재 창기준 y좌표 : ${rect.y}px`);
console.log(`엘리먼트 가로 : ${rect.width}px`);
console.log(`엘리먼트 세로 : ${rect.height}px`);
console.log(`현재 창기준 세로 시작점 부터 엘리먼트 윗변 까지의 거리 : ${rect.top}px`);
console.log(`현재 창기준 가로 시작점 부터 엘리먼트 왼쪽변 까지의 거리 : ${rect.left}px`);
console.log(`현재 창기준 가로 시작점 부터 엘리먼트 오른쪽변 까지의 거리 : ${rect.right}px`);
console.log(`현재 창기준 세로 시작점 부터 엘리먼트 아래변 까지의 거리 : ${rect.bottom}px`);
});
</script>
</body>
</html>
실행 결과
728x90
댓글