The HTML DOM clientLeft property returns the width of the left border of an element in pixels. It is a read-only property. This property will include the width of a vertical scrollbar but it will never include the left margin or left padding of an element.
Syntax
Following is the syntax for clientLeft property −
element.clientLeft
Example
Let us look at an example for the HTML DOM clientLeft property −
<!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>Output
This will produce the following output −
On clicking LEFT WIDTH −
In the above example −
We have created a div with id “styleDIV” and have a style applied to it using its id.
#styleDiv {
height: 200px;
width: 200px;
padding: 5px;
margin: 10px;
border-left: 10px solid blue;
background-color: lightgreen;
}
<div id="styleDiv">
</div>We have then created a button LEFT WIDTH that will execute widthDiv() method on click −
<button onclick="widthDiv()"<LEFT WIDTH</button>
The leftWidth () gets the <div> element using the getElementById() method and assigns it to variable x. Then using the clientLeft property on the <div> we get its left border width and after appending some text assigns it to variable txt. The text inside txt is then displayed inside the paragraph using the innerHTML property on the paragraph and assigning the txt variable to it −
function leftWidth() {
var x= document.getElementById("styleDiv");
var txt = "Border left width: " + elmnt.clientLeft + "px";
document.getElementById("Sample").innerHTML = txt;
}