Javascript DOM HTML Element offsetHeight Property

Introduction

The offsetHeight property returns the viewable height 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 {//from   ww w. j  a  v a  2 s. co  m
  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 taller than the actual height of the element, this property will only return the visible height.

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 offsetHeight property returns a Number representing the viewable height of an element in pixels, including padding, border and scrollbar.




PreviousNext

Related