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:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM clientLeft Property
</title>
<style>
h1 {
color: green;
font-size: 35px;
}
#GFG {
height: 100px;
width: 350px;
padding: 20px;
margin: 25px;
border: 10px solid coral;
background-color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>DOM clientLeft Property </h2>
<div id="GFG">
<p style="color:white;font-size:25px;">
GeeksforGeeks
</p>
<p id="sudo" style="color:white;"></p>
</div>
<button onclick="Geeks()">Submit</button>
<script>
function Geeks() {
var w = document.getElementById("GFG");
// Using clientTop property
var x = "Border-Top-Width is: "
+ w.clientTop + "px<br>";
x += "Border-Left-width : "
+ w.clientLeft + "px";
document.getElementById("sudo").innerHTML = x;
}
</script>
</center>
</body>
</html>
|
Output:
- After Click on the Button:
Supported Browsers: The browser supported by DOM clientLeft property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 5.0 and above
- Firefox 3.0 and above
- Opera 8.0 and above
- Safari 3.0 and above
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
13 Jun, 2023
Like Article
Save Article