div 요소의 경계 상자 가져오기: jQuery 구현 방법

Question

jQuery/JavaScript를 통해 div 요소의 경계 상자를 계산하고 싶습니다.

다음 코드를 시도해 보았습니다.

//상자 왼쪽
document.getElementById("myElement").offsetLeft;
//상자 상단
document.getElementById("myElement").offsetTop;
//상자 오른쪽
document.getElementById("myElement").offsetLeft + document.getElementById("myElement").offsetWidth;
//상자 바닥
document.getElementById("myElement").offsetTop + document.getElementById("myElement").offsetHeight;

일부 값을 반환합니다. 이것이 jQuery/JavaScript를 통해 div 요소의 경계 상자를 얻는 올바른 방법입니까?

SVG 요소의 getBBox() 메소드와 유사한 것이 필요합니다. 요소의 x, y, width 및 height 마찬가지로 div 요소의 경계 상자를 어떻게 얻나요?

Answer 1

이것은 jQuery용으로 특별히 태그되었으므로 -

으아악

또는

으아악

(둘 다 기능적으로 동일합니다. .get() 일부 구형 브라우저에서는 약간 더 빠릅니다)

jQuery 호출을 통해 값을 가져오려고 하면 CSS 변환 값이 고려되지 않으므로 예상치 못한 결과가 발생할 수 있습니다...

참고 2: jQuery 3.0에서는 자체 크기 호출에 적절한 getBoundingClientRect() 호출을 사용하도록 변경되었습니다(jQuery Core 3.0 업그레이드 가이드 참조). 즉, 다른 jQuery 답변은 결국 항상 정확할 것입니다. 새로운 jQuery 버전을 사용하는 것 - 이것이 바로 획기적인 변화라고 불리는 이유입니다...

Answer 2

getBoundingClientRect 메소드를 호출하여 모든 요소의 경계 상자를 가져올 수 있습니다.

으아악

이것은 왼쪽, 위쪽, 너비 및 높이 필드가 있는 개체를 반환합니다.