CSS width와 clientWidth의 차이
중요도: 5
getComputedStyle(elem).width
와 elem.clientWidth
의 차이점은 무엇일까요?
최소 세 가지 차이점을 설명해주세요. 더 많을수록 좋습니다.
둘의 차이점은 다음과 같습니다.
clientWidth
는 숫자형을 반환하는 반면,getComputedStyle(elem).width
는 끝에px
가 붙은 문자열을 반환합니다.getComputedStyle
은 인라인 요소의 너비를 구할 때"auto"
와 같은 숫자가 아닌 값을 반환할 수도 있습니다.clientWidth
는 콘텐츠와 패딩을 포함한 영역의 너비를 가르키지만, (표준box-sizing
과 연관된) CSSwidth
는 패딩을 제외한 콘텐츠 영역의 너비를 가리킵니다.- 페이지에 스크롤바가 있고 브라우저가 스크롤바 영역을 따로 처리하는 경우에, 어떤 브라우저는 CSS width를 계산할 때 스크롤바 너비를 제외하는 반면(스크롤바 영역은 콘텐츠를 담을 수 없기 때문) 어떤 브라우저는 스크롤바 영역을 포함합니다.
clientWidth
프로퍼티는 브라우저 종류에 상관 없이 항상 동일하게 스크롤바 영역이 있는 경우엔 스크롤바 너비를 제외합니다.