Thuộc tính HTML DOM clientLeft trả về chiều rộng của đường viền bên trái của một phần tử tính bằng pixel. Nó là một tài sản 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 giờ bao gồm lề trái hoặc phần đệm bên trái của một phần tử.
Cú pháp
Sau đây là cú pháp cho thuộc tính clientLeft -
element.clientLeft
Ví dụ
Hãy để chúng tôi xem xét 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>Click the below button to get border left width in pixels</p>
<button onclick="leftWidth()">LEFT WIDTH</button>
<div id="styleDiv">
</div>
<p id="Sample"></p>
<script>
function leftWidth() {
var x= document.getElementById("styleDiv");
var txt = "Border left width: " + elmnt.clientLeft + "px";
document.getElementById("Sample").innerHTML = txt;
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào RỘNG RÃI TRÁI -
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ó.
#styleDiv {
height: 200px;
width: 200px;
padding: 5px;
margin: 10px;
border-left: 10px solid blue;
background-color: lightgreen;
}
<div id="styleDiv">
</div> Sau đó, chúng tôi đã tạo một nút LEFT WIDTH sẽ thực thi phương thức widthDiv () khi nhấp chuột -
<button onclick="widthDiv()"<LEFT WIDTH</button>
LeftWidth () 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 clientLeft trên
, chúng ta nhận được chiều rộng đường viền bên trái 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 leftWidth() {
var x= document.getElementById("styleDiv");
var txt = "Border left width: " + elmnt.clientLeft + "px";
document.getElementById("Sample").innerHTML = txt;
}