이번에는 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는 장바구니의 작은 공 포물선 효과를 구현합니다. 자세한 설명
위 내용은 GetBoundingClientRect 사용법 및 호환성 처리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!