Javascript DOM HTML Element offsetWidth Property

Introduction

The offsetWidth property returns the viewable width of an element in pixels, including padding, border and scrollbar, but not the margin.

Get the height and width of a <div> element, including padding and border:

Click the button to get the height and width of div, including padding and border using both offsetHeight and offsetWidth.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//w  w w  . j a v  a  2  s  .  com
  height: 250px;
  width: 400px;
  padding: 10px;
  margin: 15px;
  border: 5px solid red;
  background-color: lightblue;
}
</style>
</head>
<body>
<button onclick="myFunction()">Test</button>

<div id="myDIV">
  <b>Information about this div:</b><br>
  Height: 250px<br>
  Width: 400px<br>
  padding: 10px<br>
  margin: 15px<br>
  border: 5px<br>
  <p id="demo"></p>
</div>

<script>
function myFunction() {
  var elmnt = document.getElementById("myDIV");
  var txt = "Height including padding and border: " + elmnt.offsetHeight + "px<br>";
  txt += "Width including padding and border: " + elmnt.offsetWidth + "px";
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

If the element's content is wider than the actual width of the element, this property will only return the width that is visible.

Use the clientHeight and clientWidth properties to return the viewable height and width of an element, only including the padding.

To add scrollbar to an element, use the CSS overflow property.

This property is read-only.

The offsetWidth property returns a Number representing the viewable width of an element in pixels, including padding, border and scrollbar.




PreviousNext

Related