GetBoundingClientRect 사용법 및 호환성 처리

이번에는 getBoundingClientRect 사용법과 호환성 처리 방법을 알려드리겠습니다. getBoundingClientRect 사용법과 호환성 처리에 대한 주의사항은 무엇인지 살펴보겠습니다.

getBoundingClientRect의 역할

getBoundingClientRect는 보기 창을 기준으로 특정 html 요소의 위치 집합을 가져오는 데 사용됩니다.

object.getBoundingClientRect();를 실행하면 요소의 상단, 오른쪽, 하단, 왼쪽, 너비 및 높이 속성이 object로 반환됩니다.

getBoundingClientRect()

이 메서드는 왼쪽, 위쪽, 오른쪽, 아래쪽의 네 가지 속성을 포함하는 사각형 개체를 반환합니다. 요소의 각 측면과 페이지의 상단 및 왼쪽 측면 사이의 거리를 각각 나타냅니다.

var box=document.getElementById('box'); // 获取元素
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离

브라우저 호환성

IE5 이상에서 지원 가능하지만 몇 가지 수정해야 할 사항이 있습니다,

IE67의 왼쪽과 위쪽은 2px가 줄어들고 너비나 높이 속성이 없습니다.

getBoundingClientRect를 사용하여 창을 기준으로 html 요소의 위치 집합을 가져오는 메서드를 작성하세요.

<p id="test" style="width: 100px; height: 100px; background: #ddd;"></p>
<script>
 function getObjXy(obj){
  var xy = obj.getBoundingClientRect();
  var top = xy.top-document.documentElement.clientTop+document.documentElement.scrollTop,//document.documentElement.clientTop 在IE67中始终为2，其他高级点的浏览器为0
   bottom = xy.bottom,
   left = xy.left-document.documentElement.clientLeft+document.documentElement.scrollLeft,//document.documentElement.clientLeft 在IE67中始终为2，其他高级点的浏览器为0
   right = xy.right,
   width = xy.width||right - left, //IE67不存在width 使用right - left获得
   height = xy.height||bottom - top;
  return {
   top:top,
   right:right,
   bottom:bottom,
   left:left,
   width:width,
   height:height
  }
 }
 var test = getObjXy(document.getElementById('test'));
 alert("top:" + test.top + ", right:" + test.right + ", bottom:" + test.bottom + ", left:" + test.left);
</script>

이 기사의 사례를 읽은 후 메서드를 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다른 항목에 주의하세요. PHP 중국어 웹사이트에 관련 기사가 있습니다!

추천 도서:

Vue는 장바구니의 작은 공 포물선 효과를 구현합니다. 자세한 설명

Vue.js의 구성 요소 사용에 대한 자세한 설명

위 내용은 GetBoundingClientRect 사용법 및 호환성 처리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!