The DOM clientLeft Property is used to return the width of the left border to an element in terms of pixel.It does not include the measurement of the width of the left padding or the left margin.It is read-only property.
Syntax
element.clientLeft Return Value: It returns a numeric value which represent the width of the left border to an element.
Example:Â
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM clientTop Property</title>
<style>
h1 {
color: green;
font-size: 35px;
}
#GFG {
width: 350px;
height: 100px;
padding: 20px;
margin: 25px;
border: 10px solid coral;
background-color: green;
box-sizing: border-box;
}
/* Style only the heading text */
#GFG .title {
color: white;
font-size: 24px;
font-weight: bold;
margin: 0 0 10px;
}
/* Style the result text separately */
#sudo {
color: white;
font-size: 12px;
line-height: 1.3;
margin: 0;
word-wrap: break-word;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>HTML DOM clientTop Property</h2>
<div id="GFG">
<p class="title">GeeksforGeeks</p>
<p id="sudo"></p>
</div>
<!--Driver Code Ends-->
<button id="btn">Submit</button>
</center>
<script>
document.getElementById("btn").addEventListener("click", function () {
var w = document.getElementById("GFG");
// Using clientTop and clientLeft properties
var x = "Border Top Width is : " + w.clientTop + "px<br>";
x += "Border Left Width is: " + w.clientLeft + "px";
document.getElementById("sudo").innerHTML = x;
});
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- element.clientLeft gives the thickness of the left border. It does not include the left margin or left padding. The value is always an integer (rounded).
- If the element has direction: rtl and a vertical scrollbar appears on the left side due to overflow, the scrollbar width is included in clientLeft. Also, for elements with display: inline, it always returns 0 regardless of any border.
