[JavaScript]HTML 요소의 넓이와 높이 가져오는 방법

HTML 요소의 넓이와 높이 가져오는 방법

이번 포스팅은 JavaScript에서 HTML 요소의 넓이와 높이를 가져오는 방법을 소개합니다.

 

이번 포스팅의 내용을 이해하려면 크롬 개발자 도구 활용 방법과 CSS 기초 지식이 필요하며, 네이버 메인 화면의 로그인 영역을 기준으로 설명합니다.

---

방법 1. offsetWidth 및 offsetHeight 프로퍼티

offsetWidth 프로퍼티와 offsetHeight 프로퍼티는 margin을 제외한 HTML 요소의 넓이와 높이를 반환합니다.

 

로그인 영역의 id 속성이 account이므로 document.getElementById() 메서드에 문자열 "account"를 전달하고 offsetWidth, offsetHeight 프로퍼티를 사용하여 넓이와 높이를 가져옵니다.

var accountContent = document.getElementById("account");

// border(1 + 1) + padding(17 + 16) + width(315) == 350
console.log(accountContent.offsetWidth);

// border(1 + 1) + padding(16 + 12) + height(105) = 135
console.log(accountContent.offsetHeight);

[실행 결과]

---

방법 2. clientWidth 및 clientHeight 프로퍼티

offsetWidth 프로퍼티와 offsetHeight 프로퍼티는 margin, border를 제외한 HTML 요소의 넓이와 높이를 반환합니다.

var accountContent = document.getElementById("account");

// padding(17 + 16) + width(315) == 348
console.log(accountContent.clientWidth);

// padding(16 + 12) + height(105) = 133
console.log(accountContent.clientHeight);

[실행 결과]

---

방법 3. getBoundingClientRect() 메서드

getBoundingClientRect() 메서드는 DOMRect 객체를 반환합니다.

 

DOMRect 객체는 넓이, 높이, 상하좌우, x, y 프로퍼티가 존재하며 반환된 값은 설정된 css와 달리 부동 소수점일 수 있습니다.

var accountContent = document.getElementById("account").getBoundingClientRect();

console.log(accountContent);

[실행 결과]

DOMRect 객체의 width, height 프로퍼티는 margin을 제외한 HTML의 요소와 넓이를 반환합니다.

---

번외. margin, border, padding 가져오는 방법

HTML 요소를 getComputedStyle() 메서드에 전달하면 적용된 스타일(margin, border, padding 등)을 가져올 수 있습니다.

var accountContent = document.getElementById("account");
var accountStyle = getComputedStyle(accountContent);

// margin
console.log('*****margin*****');
console.log(accountStyle.margin);       // 0px
console.log(accountStyle.marginLeft);   // 0px
console.log(accountStyle.marginRight);  // 0px
console.log(accountStyle.marginTop);    // 0px
console.log(accountStyle.marginBottom); // 0px

// border
console.log('*****border*****');
console.log(accountStyle.border);            // 1px solid rgb(218, 225, 230)
console.log(accountStyle.borderTopWidth);    // 1px
console.log(accountStyle.borderLeftWidth);   // 1px
console.log(accountStyle.borderBottomWidth); // 1px
console.log(accountStyle.borderRightWidth);  // 1px

// padding
console.log('*****padding*****');
console.log(accountStyle.padding);       // 16px 16px 12px 17px
console.log(accountStyle.paddingLeft);   // 17px
console.log(accountStyle.paddingRight);  // 16px
console.log(accountStyle.paddingTop);    // 16px
console.log(accountStyle.paddingBottom); // 12px