Thuộc tính chiều rộng máy khách HTML DOM

Thuộc tính HTML clientWidth được sử dụng để lấy chiều rộng có thể xem được của một phần tử HTML. Chiều rộng này bao gồm phần đệm nhưng không bao gồm bất kỳ đường viền, thanh cuộn và lề nào. Nó sẽ chỉ trả về chiều rộng của phần tử ngay cả khi nội dung tràn ra khỏi phần tử.

Cú pháp

Sau đây là cú pháp cho thuộc tính clientWidth -

element.clientWidth

Ví dụ

Hãy để chúng tôi xem một ví dụ cho thuộc tính 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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Thuộc tính chiều rộng máy khách HTML DOM

Khi nhấp vào NHẬN RỘNG RÃI -

Thuộc tính chiều rộng máy khách HTML DOM

Trong ví dụ trên -

Chúng tôi đã tạo một div với id “styleDIV” và áp dụng một kiểu cho nó bằng cách sử dụng id của nó.

#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>

Sau đó, chúng tôi đã tạo một nút GET WIDTH sẽ thực thi phương thức getWidth () khi nhấp chuột -

<button onclick="getWidth()">GET WIDTH</button>

Hàm getWidth () nhận phần tử

bằng cách sử dụng phương thức getElementById () và gán nó cho biến x. Sau đó, sử dụng thuộc tính clientWidth trên

, chúng ta nhận được chiều rộng của nó và sau khi thêm một số văn bản sẽ gán nó cho biến txt. Sau đó, văn bản bên trong txt được hiển thị bên trong đoạn văn bằng cách sử dụng thuộc tính innerHTML trên đoạn văn và gán biến txt cho nó -

function getWidth() {
   var x = document.getElementById("divStyle");
   var txt = "Width including padding: " + x.clientWidth + "px";
   document.getElementById("Sample").innerHTML = txt;
}