HTML - DOM Element offsetWidth Property

Quiz

The HTML DOM Element offsetWidth property is used to retrieve the total viewable width of that element on the web page, including its content width,horizontal padding and borders, measured in pixels.

Syntax

Following is the syntax of the HTML DOM Element offsetWidth property −

element.offsetWidth

Parameters

Since this is a property, it does not accept any parameter.

Return Value

This property returns an integer value that holds the total pixel width of an element, including its padding, border, and optionally scrollbar width.

Example 1: Offset Width on Button Click

The following program demonstrates the usage of the HTML DOM Element offsetWidth property. It returns the total viewable width of the <div> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element offsetWidth</title>
<style>
   #exampleElement {
      width: 200px;
      padding: 10px;
      border: 1px solid black;
      background-color: lightblue;
   }
</style>
</head>
<body>
<h3>HTML DOM Element offsetHeight Property</h3>
<div id="exampleElement">Example Element</div><br>
<button onclick="showWidth()">Show Width</button>
<script>
   function showWidth() {
      const element = document.getElementById('exampleElement');
      const width = element.offsetWidth;
      alert(`Width of the 'div' element: ${width}px`);
   }
</script>
</body>
</html>

The above program alert the total viewable width of the 'div' element.

Example 2: Offset Width with Padding and Border

Here is another example of using the HTML DOM Element offsetWidth property. This property retrieves the total viewable width, including padding and border −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element offsetWidth</title>
<style>
   #ex{
      width: 200px;
      padding: 20px;
      border: 2px solid black; 
      background-color: rgb(62, 161, 23);
      text-align: center;
      color: white;
      font-size: 22px;
   }
   #wi { 
      color: green;
   }
   button{
      padding: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element offsetWidth Property</h3>
<div id="ex">Example Element</div>
<p>Click below button to show Width including Padding and Border</p>
<button onclick="showWidth()">Show</button>
<p id="wi"></p>
<script>
   const exampleElement=document.getElementById('ex');
   const widthDisplay = document.getElementById('wi');
   function showWidth() {
      const widthWithPaddingBorder = exampleElement.offsetWidth;
      widthDisplay.textContent = `Width including padding and border: 
	  ${widthWithPaddingBorder}px`;
   }
</script>
</body>
</html>

When the button is clicked, the program displays the total viewable width, which includes padding and border.

Example 3: Calculating the Width of the Scrollbar Dynamically

The example below shows how to use the offsetWidth property to calculate the width of the scrollbar element dynamically −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element offsetWidth</title>
<style>
   #scroll {
      width: 200px;
      height: 200px;
      overflow: scroll;
      border: 1px solid black;
      padding: 20px;
   }
   #cont {
      width: 100%;
      height: 400px;
   }
   button {
      padding: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element offsetHeight Property</h3>
<div id="scroll">
<div id="cont">Scrollable Content</div>
</div><br>
<button onclick="calculate()">Calculate Scrollbar Width</button>
<p id="scrollbar"></p>
<script>
   function calculate() {
      const scCon = document.getElementById('scroll');
      const scwid = scCon.offsetWidth - scCon.clientWidth;
      document.getElementById('scrollbar').innerHTML = 
	  `Scrollbar width: ${scwid}px`;
   }
</script>
</body>
</html>

The above program displays the width of the scrollbar.

Supported Browsers

Property
offsetWidth	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page