Thuộc tính HTML DOM clientLeft trả về chiều rộng của viền trái của một phần tử tính bằng pixel. Đây là thuộc tính chỉ đọc. Thuộc tính này sẽ bao gồm chiều rộng của thanh cuộn dọc nhưng sẽ không bao gồm lề trái hoặc padding trái của một phần tử.
Cú pháp
Cú pháp sau đây dùng cho thuộc tính clientLeft:
element.clientLeft
Ví dụ
Hãy xem một ví dụ cho thuộc tính HTML DOM clientLeft:
<!DOCTYPE html> <html> <head> <style> #styleDiv { height: 200px; width: 200px; padding: 5px; margin: 10px; border-left: 10px solid blue; background-color: lightgreen; } </style> </head> <body> <p>Nhấn nút bên dưới để lấy chiều rộng viền trái tính bằng pixel</p> <button onclick="leftWidth()">CHIỀU RỘNG TRÁI</button> <div id="styleDiv"> </div> <p id="Sample"></p> <script> function leftWidth() { var x = document.getElementById("styleDiv"); var txt = "Chiều rộng viền trái: " + x.clientLeft + "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 CHIỀU RỘNG TRÁI:
Trong ví dụ trên:
Chúng ta đã tạo một div với id "styleDiv" và có kiểu dáng được áp dụng cho nó bằng id của nó.
#styleDiv { height: 200px; width: 200px; padding: 5px; margin: 10px; border-left: 10px solid blue; background-color: lightgreen; } <div id="styleDiv"> </div>Chúng ta đã tạo nút CHIỀU RỘNG TRÁI sẽ thực thi phương thức leftWidth() khi nhấp:
<button onclick="leftWidth()">CHIỀU RỘNG TRÁI</button>
Phương thức leftWidth() 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 clientLeft trên <div>, chúng ta lấy chiều rộng viền trái 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 leftWidth() { var x = document.getElementById("styleDiv"); var txt = "Chiều rộng viền trái: " + x.clientLeft + "px"; document.getElementById("Sample").innerHTML = txt; }