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.offsetWidth
Return Value: It returns the layout width of an element as an integer.
Example 1: In this example, we will use DOM offsetWidth property.
HTML
<!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>
<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>
</body>
</html>
|
Output:
Example 2: In this example, we will use DOM offsetWidth Property
HTML
<!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>
<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>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by DOM offsetWidth property are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 5.5 and above
- Firefox 1 and above
- Opera 8 and above
- Safari 3 and above