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