HTML DOM getBoundingClientRect() 메서드

<시간/>

HTML DOM getBoundingClientRect()는 뷰포트의 위치에 상대적인 요소 크기를 반환하는 데 사용됩니다. left, top, right, bottom, x, y, width, height 8개의 속성이 있는 DOMRect 유형의 객체를 반환합니다. 스크롤 위치가 변경되면 경계 사각형 위치가 변경됩니다.

구문

다음은 getBoundingClientRect() 메서드의 구문입니다. -

element.getBoundingClientRect()

예시

getBoundingClientRect() 메서드의 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<head>
<script>
   function RectInfo() {
      document.getElementById("Sample").innerHTML="";
      var d = document.getElementById("DIV1");
      var Rect = d.getBoundingClientRect();
      rl = Rect.left;
      rt = Rect.top;
      rw = Rect.width;
      rh = Rect.height;
      document.getElementById("Sample").innerHTML +="Left: " + rl + ",<br> Top: " + rt + ",<br> Width: " + rw + ",<br> Height: " + rh;
   }
</script>
<style>
   #DIV1{
      width:350px;
      height:250px;
      border:2px solid blue;
      color:red;
   }
</style>
</head>
<body>
<h1>getBoundingClientRect() example</h1>
<div style="height:200px; width:300px; overflow:auto;">
<div id="DIV1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<br>
<button onclick="RectInfo()">GET INFO</button>
<p id="Sample"></p>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM getBoundingClientRect() 메서드

GET INFO 버튼 클릭 시 -

HTML DOM getBoundingClientRect() 메서드

위의 예에서 -

먼저 높이와 너비가 각각 200px 및 300px인 div를 만들었습니다. 오버플로 속성이 auto로 설정되어 있습니다. 즉, 내용이 div를 오버플로하면 스크롤바가 자동으로 추가됩니다. 여기에는 일부 스타일이 적용된 ID가 "DIV1"인 다른 div가 포함되어 있습니다.

#DIV1{
   width:350px;
   height:250px;
   border:2px solid blue;
   color:red;
}
<div style="height:200px; width:300px; overflow:auto;">
<div id="DIV1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>

그런 다음 사용자가 클릭할 때 RectInfo() 메서드를 실행하는 GET INFO 버튼을 만들었습니다.

<button onclick="RectInfo()">GET INFO</button>

RectInfo() 메서드는 getElementById() 메서드를 사용하여

요소를 가져와 변수 d에 할당합니다. 그런 다음 변수 d에 대한 getBoundingClientRect() 메서드를 사용하여 div 요소에 대한 정보가 포함된 DOMRect 객체를 반환합니다. 반환된 개체는 Rect 변수에 할당됩니다.

그런 다음 DOMRect 객체의 left, top, width 및 height 속성을 사용하여 뷰포트에 상대적인 위치와 크기를 표시합니다. 이 정보는 innerHTML 속성을 사용하여 id가 "Sample"인 단락에 표시됩니다 -

function RectInfo() {
   document.getElementById("Sample").innerHTML="";
   var d = document.getElementById("DIV1");
   var Rect = d.getBoundingClientRect();
   rl = Rect.left;
   rt = Rect.top;
   rw = Rect.width;
   rh = Rect.height;
   document.getElementById("Sample").innerHTML +="Left: " + rl + ",<br> Top: " + rt + ",<br> Width: " + rw + ",<br> Height: " + rh;
}