The DOM clientWidth Property is used to return the viewable width of a specific element including padding but excluding the measurement of margin, border, and scrollbar width. This property only returns the actual width of an element that is viewable or visible to the user. It is a read-only property.
Syntax
element.clientWidth Return Value: It returns a Numeric value that represents the viewable width of an element.
Example: In this example, we will use DOM clientWidth property
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>HTML | DOM clientWidth Property</title>
<style>
h1 {
color: green;
font-size: 35px;
}
#GFG {
height: 200px;
width: 250px;
padding: 40px;
margin: 25px;
border: 5px solid coral;
background-color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>DOM clientWidth Property</h2>
<div id="GFG">
<h4 style="color: white; font-size: 40px;">
GeeksforGeeks
</h4>
<p id="sudo" style="color: white;"></p>
</div>
<!--Driver Code Ends-->
<button id="submitBtn">Submit</button>
</center>
<script>
document.getElementById("submitBtn").addEventListener("click", function () {
let element = document.getElementById("GFG");
let result = "Viewable Height is: "
+ element.clientHeight
+ "px<br>";
result += "Viewable Width is: "
+ element.clientWidth
+ "px";
document.getElementById("sudo").innerHTML = result;
});
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- It returns the inner width including padding but excluding borders, margins, and vertical scrollbars element.clientWidth = CSS width + horizontal padding − width of any vertical scrollbar (if present). The value is always an integer (rounded). It returns 0 for inline elements or elements with no CSS layout box.
- When used on the <html> (or on <body> in quirks mode), it returns the width of the viewport (excluding any scrollbar), not the width of the element itself.
