The DOM offsetWidth property is used to return the layout width of an element as an integer. It is measured in pixels. It includes width, border, padding, and vertical scrollbars but not margin. If the element is hidden then it returns 0.
Syntax
element.offsetWidthReturn Value: It returns the layout width of an element as an integer.
Example 1: In this example, we will use DOM offsetWidth property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style offsetWidth Property
</title>
<style>
#GFG {
height: 150px;
width: 300px;
padding: 10px;
margin: 15px;
background-color: green;
}
</style>
</head>
<body>
<h2>DOM Style offsetWidth Property</h2>
<div id="GFG">
<b>Information about this div:</b>
<p id="demo"></p>
</div>
<!--Driver Code Ends-->
<button type="button" onclick="Geeks()">
Submit
</button>
<script>
function Geeks() {
let element = document.getElementById("GFG");
let txt = "Width including padding and border: "
+ element.offsetWidth + "px";
document.getElementById("demo").innerHTML = txt;
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Example 2: In this example, we will use DOM offsetWidth Property
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style offsetWidth Property
</title>
<style>
#GFG {
height: 150px;
width: 300px;
padding: 10px;
margin: 15px;
background-color: green;
}
</style>
</head>
<body>
<h2>DOM Style offsetWidth Property</h2>
<div id="GFG">
<b>Information about this div:</b>
<br>
<p id="demo"></p>
</div>
<!--Driver Code Ends-->
<button type="button" onclick="Geeks()">
Submit
</button>
<script>
function Geeks() {
let element = document.getElementById("GFG");
let txt = "";
txt += "Width with padding: "
+ element.clientWidth + "px<br>";
txt += "Width with padding and border: "
+ element.offsetWidth + "px";
document.getElementById("demo").innerHTML = txt;
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- This includes the content width + horizontal padding + left/right borders + vertical scrollbar (if present and rendered).It does not include margins or the width of pseudo-elements (::before / ::after).
- If the element (or any ancestor) has display: none, it returns 0.
