Element offsetHeight Property - Javascript DOM

Javascript examples for DOM:Element offsetHeight

  1. HOME
  2. Javascript
  3. DOM
  4. Element offsetHeight

Description

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

This property is read-only.

Return Value

A Number, representing the viewable height of an element in pixels, including padding, border and scrollbar

The following code shows how to get the height and width of a <div> element, including padding and border:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//from   w  w  w . j a  v a  2 s . c  o  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">
  This is a test. This is a test. This is a test.
  This is a test. This is a test. This is a test.
  This is a test. This is a test. This is a test.
  <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>

Related Tutorials