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