HTML DOM clientWidth 속성

clientWidth읽기 전용 속성은 요소의 보이는 너비(픽셀为单位)를 반환하며, 패딩을 포함하지만 테두리, 여백 및 수직 스크롤 바(존재하면)를 포함하지 않습니다.

clientWidth 계산식은 다음과 같습니다: CSS width + CSS 패딩-존재하면 수직 스크롤 바의 너비도 알아야 합니다.

이 속성을 이해하려면,CSS 박스 모델.

사용offsetWidth속성은 요소의 보이는 너비를 반환하며, 패딩, 테두리, 수직 스크롤 바를 포함합니다.

문법:

element.clientWidth

예제

var elem = document.querySelector("div");
var txt = "높이 포함 패딩: "　+　elem.clientHeight　+　"px<br>";
txt　+=　"너비 포함 패딩:　"　+　elem.clientWidth　+　"px";

모든 브라우저에서 clientWidth 속성을 완전히 지원합니다:

속성
clientWidth	는	는	는	는	는

반환 값:	너비를 표시하는 수치(픽셀 단위), 패딩 포함

이 예제는 clientWidth와 offsetWidth의 차이를 보여줍니다:

예제

var elem = document.querySelector("div");
var txt = "너비 포함 패딩:　"　+　elem.clientWidth　+　"px<br>";
txt　+=　"너비 포함 패딩"+박스:　"　+　elem.offsetWidth　+　"px";