Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to find width of a div using vanilla JavaScript?
Overview
JavaScript provides two built-in properties to find the width of a div element: offsetWidth and clientWidth. These properties return the width in pixels but calculate it differently based on what measurements they include.
Syntax
element.offsetWidth element.clientWidth
offsetWidth ? Returns the total width including content, padding, border, and scrollbar (if present)
clientWidth ? Returns the width including content and padding, but excludes border and scrollbar
Understanding the Difference
The key difference between these methods is what measurements they include:
| Property | Includes Content | Includes Padding | Includes Border | Includes Scrollbar |
|---|---|---|---|---|
offsetWidth |
Yes | Yes | Yes | Yes |
clientWidth |
Yes | Yes | No | No |
Using offsetWidth
The offsetWidth property returns the complete outer width of an element:
<html>
<head>
<title>Width of div using offsetWidth</title>
</head>
<body>
<div id="myDiv" style="width: 200px; padding: 20px; border: 5px solid black; background-color: lightblue;">
Content area with padding and border
</div>
<p id="result"></p>
<script>
var element = document.getElementById("myDiv");
var width = element.offsetWidth;
document.getElementById("result").innerHTML = "offsetWidth: " + width + "px";
</script>
</body>
</html>
Using clientWidth
The clientWidth property returns the inner width excluding borders and scrollbars:
<html>
<head>
<title>Width comparison - clientWidth vs offsetWidth</title>
</head>
<body>
<div id="testDiv" style="width: 200px; padding: 15px; border: 3px solid red; background-color: lightgreen;">
Test content for width measurement
</div>
<div id="results"></div>
<script>
var element = document.getElementById("testDiv");
var offsetW = element.offsetWidth;
var clientW = element.clientWidth;
var output = "<p>offsetWidth: " + offsetW + "px (includes border)</p>";
output += "<p>clientWidth: " + clientW + "px (excludes border)</p>";
output += "<p>Border width: " + (offsetW - clientW) + "px</p>";
document.getElementById("results").innerHTML = output;
</script>
</body>
</html>
Practical Example: Responsive Width Detection
Here's a practical example that shows how div width changes based on content and styling:
<html>
<head>
<title>Responsive Width Detection</title>
</head>
<body>
<div id="responsive" style="background-color: navy; color: white; padding: 10px; margin: 10px 0;">
This div has no fixed width
</div>
<div id="fixed" style="background-color: maroon; color: white; width: 300px; padding: 10px; border: 2px solid black; margin: 10px 0;">
This div has fixed width of 300px
</div>
<button onclick="checkWidths()">Check Widths</button>
<div id="output"></div>
<script>
function checkWidths() {
var responsive = document.getElementById("responsive");
var fixed = document.getElementById("fixed");
var result = "<h3>Width Measurements:</h3>";
result += "<p>Responsive div - offsetWidth: " + responsive.offsetWidth + "px</p>";
result += "<p>Responsive div - clientWidth: " + responsive.clientWidth + "px</p>";
result += "<p>Fixed div - offsetWidth: " + fixed.offsetWidth + "px</p>";
result += "<p>Fixed div - clientWidth: " + fixed.clientWidth + "px</p>";
document.getElementById("output").innerHTML = result;
}
</script>
</body>
</html>
When to Use Each Method
Use offsetWidth when you need the complete outer dimensions for positioning or collision detection
Use clientWidth when you need the usable inner space for content layout calculations
Both properties return values in pixels as integers
Both work on any HTML element, not just divs
Conclusion
Use offsetWidth for total element width including borders, or clientWidth for inner content width. Choose based on whether you need border measurements included in your calculations.
2K+ Views
