getBoundingClientRect_요소 위치 잡기

0

---

드롭다운 메뉴가 현재 화면 상에 보이는 컨테이너의 너비와 위치에 맞게 나타나도록 다음과 같이 구현하였다.

const target = document.querySelector('.dropdown-item-list-box'); //컨테이너 elem
const labelRect = this.dropdownLabel.getBoundingClientRect(); // elem의 상대적 위치와 크기의 값을 가져옴
target.style.cssText = `
            position: absolute;
            width: ${labelRect.width}px;
            top: ${labelRect.top + 5}px;
        `;

Element.getBoundingClientRect() 메서드는 DOMRect 요소의 크기와 뷰포트에 상대적인 위치에 대한 정보를 제공 하는 객체를 반환합니다 

인터페이스의 cssText 속성은 CSSStyleDeclaration 요소의 인라인 스타일 선언 텍스트만 반환하거나 설정합니다