How to Get the Height of an Element

There are many properties that can be used to determine the height/width of elements, but it can be difficult to decide which is appropriate for a particular situation. However, you cannot get the height of an element using only CSS. In this tutorial, we’ll show how you can do this with the help of jQuery.

Solutions with offsetHeight and clientHeight

The first method is to use the offsetHeight property. It is a read-only property that returns the height of an element in pixels, including border, padding, and scrollbar.

We’ll use the following syntax in our example:

divElement.offsetHeight

Example of getting the height of an element using the offsetHeight property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
      }
      h1 {
        color: #8ebf42;
      }
      .box {
        height: 110px;
        width: 110px;
        background-color: #8ebf42;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h1>W3Docs</h1>
    <b> 
      Get the height of the element 
    </b>
    <p>
      Click on the button to get the height of the element
    </p>
    <div class="box"></div>
    <p>
      Height of the div:
      <span class="output"></span>
    </p>
    <button onclick="getHeight()">
      Get Height
    </button>
    <script type="text/javascript">
      function getHeight() {
        divElement = document.querySelector(".box");
        elemHeight = divElement.offsetHeight;
        document.querySelector(".output")
          .textContent = elemHeight + "px";
      }
    </script>
  </body>
</html>

The second method is to use the clientHeight property. It is a read-only property that returns the height of an element in pixels, including padding.

We’ll use the following syntax in our next example:

divElement.clientHeight

Example of getting the height of an element using the clientHeight property:

<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document </title>
    <style>
      body {
        text-align: center;
      }
      h1 {
        color: #8ebf42;
      }
      .box {
        height: 110px;
        width: 110px;
        background-color: #8ebf42;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h1>W3Docs</h1>
    <b> 
    Get the height of the element 
    </b>
    <p>
      Click on the button to get the height of the element
    </p>
    <div class="box"></div>
    <p>
      Height of the div:
      <span class="output"></span>
    </p>
    <button onclick="getHeight()">
      Get Height
    </button>
    <script type="text/javascript">
      function getHeight() {
        divElement = document.querySelector(".box");
        elemHeight = divElement.clientHeight;
        document.querySelector(".output")
          .textContent = elemHeight + "px";
      }
    </script>
  </body>
</html>

Solution with jQuery height() and width() methods

We can also use the jQuery height() and width() methods to get the height and width of the element. This height and width do not include border, padding and margin.

Let’s see how we can return the height and width of a <div> element.

Example of getting the height and width of an element using height() and width() methods:

<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document </title>
    <style>
      #box {
        width: 300px;
        height: 200px;
        padding: 25px;
        text-align: justify;
        border: 10px solid #c6b51a;
        background: #f0e68c;
        margin: 15px;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>   
 </head>
  <body>
    <div id="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla non purus nisld Dapibus nec turpis vel, semper malesuada ant.
    </div>
    <button type="button">Get Width and Height</button>
    <p id="result"></p>
<script>
      $(document)
        .ready(function() {
          $("button")
            .click(function() {
              var divWidth = $("#box")
                .width();
              var divHeight = $("#box")
                .height();
              $("#result")
                .html("Width: " + divWidth + ", " + "Height: " + divHeight);
            });
        });
    </script>
  </body>
</html>

Solution with jQuery innerHeight() and innerWidth() methods

The jQuery innerHeight() and innerWidth() methods get the inner height and width of an element. Inner height and width include padding.

Example of getting the height and width of an element using the innerHeight() and innerWidth() methods:

<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document </title>
    <style>
      #box {
        width: 280px;
        height: 170px;
        padding: 20px;
        text-align: justify;
        border: 10px solid #795d80;
        background: #a997ad;
        margin: 15px;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
  </head>
  <body>
    <div id="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <button type="button">Get innerWidth and innerHeight</button>
    <p id="result"></p>
    <hr>
  <script>
      $(document)
        .ready(function() {
          $("button")
            .click(function() {
              var divWidth = $("#box")
                .innerWidth();
              var divHeight = $("#box")
                .innerHeight();
              $("#result")
                .html("Inner Width: " + divWidth + ", " + "Inner Height: " + divHeight);
            });
        });
    </script>
  </body>
</html>

Solution with jQuery outerHeight() and outerWidth() methods

The jQuery outerHeight() and outerWidth() methods get the outer height and width. This outer height and width get the outer height and width of an element. Outer height and width include padding and border.

Example of getting the height and width of an element using the outerHeight() and outerWidth() methods:

<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document </title>
    <style>
      #box {
        width: 280px;
        height: 170px;
        padding: 20px;
        text-align: justify;
        border: 10px solid #795d80;
        background: #a997ad;
        margin: 15px;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
  </head>
  <body>
    <div id="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <button type="button">Get outerWidth and outerHeight</button>
    <p id="result"></p>
    <hr>
 <script>
      $(document)
        .ready(function() {
          $("button")
            .click(function() {
              var divWidth = $("#box")
                .outerWidth();
              var divHeight = $("#box")
                .outerHeight();
              $("#result")
                .html("Outer Width: " + divWidth + ", " + "Outer Height: " + divHeight);
            });
        });
    </script>
  </body>
</html>