width N height of elements

width

height

min-width

max-width

min-height

max-height

 

** 그림 자료가 어느 블로그 캡쳐한건데 기억이 나지않는다

 

1. HTMLElement.offsetWidth, HTMLElement.offsetHeight

read-only property that returned the layout width of an element as a integer.

- transform이 없다면 Element.getBoundingClientRect()과 비슷

- total amount of space an element occupies, including the width of the visible content, scrollbars (if any), padding, and border

- if the element is hidden, then 0 is rendered

 

2. Element.clientWidth, Element.clientHeight

size of the displayed content

실제로 보여지고 있는 콘텐츠가 얼마만큼의 공간을 차지하고 있는지(padding O, border X, scrollbar X)

 

3. Element.scrollWidth, Element.scrollHeihgt

보이는 것과 상관없이 실제 컨텐츠 영역이 얼마만큼의 크기를 가지고 있는지

스크롤 아니더라도 말줄임표로 생략된 부분까지 너비 알 수 있어🔔

actual size of the content, regardless of how much of it is currently visible

return the width and height of the entire content of an element

function isEllipsisActive(element) {
	return element.offsetWidth < element.scrollWidth;
}

 

4. getComputedStyle: global function

returns an object containing the values of all CSS properties of an element after the active stylesheets and basic computations are applied to it.

const p = document.querySelector('p');
console.log(getComputedStyle(p).width);

 

5. getBoundingClientRect()

offsetWidth와 offsetHeight와 거의 같은 값을 리턴한다(transform이 적용되지 않았을 때)

transfrom까지 해서 렌더링된 크기를 알고 싶다면 getBoudingClientRect()을 사용해야 한다

.example {
    width : 100px;
    transform : scale(0.5);
}

offsetWidth 의 값은 100,

getBoudingClientRect() : 50반환

최종 렌더링된 값을 알고 싶다면 getBoundingClientReact()을 사용해야 한다

 

다음 포스트에 자세히 있어!

-> https://ksj12172.tistory.com/400

 

출처 : https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements