HTML DOM clientWidth 속성은 HTML 요소의 볼 수 있는 너비를 가져오는 데 사용됩니다. 이 너비에는 패딩이 포함되지만 테두리, 스크롤 막대 및 여백은 제외됩니다. 콘텐츠가 요소에서 오버플로되더라도 요소 너비만 반환합니다.
구문
다음은 clientWidth 속성의 구문입니다 -
element.clientWidth
예시
HTML DOM clientWidth 속성에 대한 예를 살펴보겠습니다. -
<!DOCTYPE html> <html> <head> <style> #divStyle { width: 200px; height: 200px; padding: 10px; margin: 15px; border: 5px solid blue; background-color: lightgreen; } </style> </head> <body> <p>Click the below button to get the widhth of the div</p> <button onclick="getWidth()">GET WIDTH</button> <div id="divStyle"> <b>A sample div</b> </div> <p id="Sample"></p> <script> function getWidth() { var x = document.getElementById("divStyle"); var txt = "Width including padding: " + x.clientWidth + "px"; document.getElementById("Sample").innerHTML = txt; } </script> </body> </html>
출력
이것은 다음과 같은 출력을 생성합니다 -
GET WIDTH −
클릭 시
위의 예에서 -
id가 "styleDIV"인 div를 만들고 해당 id를 사용하여 스타일을 적용했습니다.
#divStyle { width: 200px; height: 200px; padding: 10px; margin: 15px; border: 5px solid blue; background-color: lightgreen; }
div -
<div id="divStyle"> <b>A sample div</b> </div>
그런 다음 클릭 시 getWidth() 메서드를 실행하는 GET WIDTH 버튼을 만들었습니다. −
<button onclick="getWidth()">GET WIDTH</button>
getWidth()는 getElementById() 메서드를 사용하여
요소를 가져와 변수 x에 할당합니다. 그런 다음
의 clientWidth 속성을 사용하여 너비를 얻고 일부 텍스트를 추가한 후 변수 txt에 할당합니다. 그런 다음 txt 안의 텍스트는 단락의 innerHTML 속성을 사용하고 txt 변수를 할당하여 단락 내부에 표시됩니다. -
function getWidth() { var x = document.getElementById("divStyle"); var txt = "Width including padding: " + x.clientWidth + "px"; document.getElementById("Sample").innerHTML = txt; }