최신 웹 개발 튜토리얼
 

HTML DOM clientWidth Propery

<요소 개체

예

높이와 폭 얻기 <div> 패딩을 포함한 요소를 :

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px";

TXT의 결과는 다음과 같습니다

Height with padding: 270px
Width with padding: 420px
»그것을 자신을 시도

더 "Try it Yourself" 아래의 예.

정의 및 사용

clientWidth 속성은 볼 패딩을 포함 픽셀의 요소의 폭,하지만 경계, 스크롤 또는 마진을 돌려줍니다.

이유 "viewable" 요소의 내용이 요소의 실제 폭보다 넓은 경우에만 볼 수있는 폭을 반환이 속성이 있기 때문에 단어가 지정되어있다 (See "More Examples") .

참고 :이 속성을 이해하려면, 당신은 이해해야합니다 CSS 박스 모델 .

팁 :이 속성은 종종 함께 사용된다 clientHeight 속성입니다.

팁 : 사용 는 offsetHeight 및 offsetWidth를 패딩, 테두리와 스크롤바를 포함하는 요소의 볼 높이와 너비를 반환하는 속성을.

팁 : 요소에 스크롤바를 추가하려면 CSS를 사용하여 오버 플로우 속성을.

이 속성은 읽기 전용입니다.

브라우저 지원

재산
clientWidth 예 예 예 예 예

통사론

element .clientWidth

기술적 세부 사항

반환 값 : 패딩을 포함하여 픽셀 요소의 조회 폭을 나타내는 숫자,
예

더 예

예

이 예는 clientHeight / clientWidth와는 offsetHeight / offsetWidth를 사이의 차이를 보여줍니다

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

TXT의 결과는 다음과 같습니다

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
»그것을 자신을 시도

예

우리는 요소에 스크롤 막대를 추가 할 때이 예는, clientHeight / clientWidth와는 offsetHeight / offsetWidth를 사이의 차이를 보여줍니다

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

TXT의 결과는 다음과 같습니다

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
»그것을 자신을 시도

<요소 개체