Thuộc tính HTML DOM clientWidth được dùng để lấy chiều rộng có thể nhìn thấy của một phần tử HTML. Chiều rộng này bao gồm padding nhưng loại trừ bất kỳ 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
Cú pháp sau đây dùng cho thuộc tính clientWidth:
element.clientWidth
Ví dụ
Hãy 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>Nhấn nút bên dưới để lấy chiều rộng của div</p> <button onclick="getWidth()">LẤY CHIỀU RỘNG</button> <div id="divStyle"> <b>Một div mẫu</b> </div> <p id="Sample"></p> <script> function getWidth() { var x = document.getElementById("divStyle"); var txt = "Chiều rộng bao gồm padding: " + x.clientWidth + "px"; document.getElementById("Sample").innerHTML = txt; } </script> </body> </html>Kết quả
Điều này sẽ tạo ra kết quả sau:
Khi nhấn LẤY CHIỀU RỘNG:
Trong ví dụ trên:
Chúng ta đã tạo một div với id "divStyle" và có kiểu dáng được áp dụng cho nó bằ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>Một div mẫu</b> </div>
Chúng ta đã tạo nút LẤY CHIỀU RỘNG sẽ thực thi phương thức getWidth() khi nhấp:
<button onclick="getWidth()">LẤY CHIỀU RỘNG</button>
Phương thức getWidth() lấy phần tử <div> bằ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 <div>, chúng ta lấy chiều rộng của nó và sau khi nối thêm một số văn bản gán nó cho biến txt. Văn bản bên trong txt sau đó được hiển thị bên trong đoạn văn bằ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 = "Chiều rộng bao gồm padding: " + x.clientWidth + "px"; document.getElementById("Sample").innerHTML = txt; }