알고있으면 좋은 Javascript Tip✨
getBoundingClientRect()
- getBoundingClientRect() 메서드는 웹페이지 요소의 위치와 크기를 알아내고자 할 때 사용한다.
- 쉽게 말해, 뷰포트(웹 페이지의 보이는 부분)에서 요소의 위치와 크기를 가져온다.
(1) getBoundingClientRect 기본 문법
- width : pixel 단위의 요소의 가로 크기
- height : pixel 단위 요소의 세로 크기
- top : 뷰포트의 위쪽에서 요소의 위쪽 까지의 거리
- left : 뷰포트의 왼쪽에서 요소의 왼쪽 부분까지의 거리
- bottom : 뷰포트의 아래쪽과 요소의 아래쪽 거리
- right : 뷰포트의 오른쪽과 요소의 오른쪽 사이 거리
(2) getBoundingClientRect 예제 활용
<!DOCTYPE html>
<html>
<head>
<style>
#myElement {
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="myElement">Example Element</div>
<script>
let element = document.getElementById('myElement');
// 뷰포트를 기준으로 요소의 크기와 위치를 가져온다.
let rect = element.getBoundingClientRect();
console.log('요소의 너비: ' + rect.width);
console.log('요소의 높이: ' + rect.height);
console.log('뷰포트 상단으로부터의 거리: ' + rect.top);
console.log('뷰포트 왼쪽으로부터의 거리: ' + rect.left);
console.log('뷰포트 하단으로부터의 거리: ' + rect.bottom);
console.log('뷰포트 오른쪽으로부터의 거리: ' + rect.right);
</script>
</body>
</html>'Study > JavaScript' 카테고리의 다른 글
| [JS] undefined & null (0) | 2023.10.26 |
|---|---|
| [JS] Class (0) | 2023.10.26 |
| [JS] toFixed (0) | 2023.10.19 |
| [JS] padStart & padEnd (0) | 2023.10.17 |
| [JS] reduce (0) | 2023.10.17 |