<Javascript> offsetWidth - HTML 요소의 크기

ToDoList를 만들 때 처음 배웠던 속성이다.

UnderLine 만들기 글을 보면 나와있듯이 현재 보여지는 메뉴에 밑줄을 표시하기 위해 사용했다.

 

이번엔 축구통계사이트를 만들다가 반응형 웹페이지를 만들기 위해서

모바일 버전일 경우의 구조로 변형시키고 싶었는데 잘 되지 않았다.

css에서 @media screen and()를 이용하는 방법도 있지만 js에서 offsetWidth를 이용하여 더 쉽게 해결했다.

이참에 offsetWidth에 대한 내용을 정리해보자.

 

offsetWidth / offsetHeight

document.querySelector(".className").offsetWidth;
document.querySelector(".className").offsetHeight;

margin을 제외한 padding값, border값까지 계산한 값

 

clientWidth / clientHeight

document.querySelector(".className").clientWidth;
document.querySelector(".className").clientHeight;

margin, border을 제외하고 padding값까지 계산한 값

 

scrollWidth / scrollHeight

document.querySelector(".className").scrollWidth;
document.querySelector(".className").scrollHeight;

스크롤 적용이 되어있을 때 가려진 전체의 크기를 계산한 값

 

getBoundingClientRect();

element = document.querySelector(".className");
domRect = element.getBoundingClientRect();

padding과 border-width를 포함해 전체 설명이 포함된 가장 작은 사각형인 DOMRect 객체

{left, top, right, bottom, x, y, width, height} 반환

//DOMRect이란?

DOMRect 인터페이스는 직사각형의 크기와 위치를 나타냄