Skip to content
Related Articles

Related Articles

Improve Article

How to get the height of a div using jQuery ?

  • Last Updated : 21 Dec, 2020

In this article, we will learn how to get the height of a div using jQuery. In jQuery, height method is used to get the height of any element in HTML. The height method sets and returns the height of the HTML elements.

Method 1: The height() method returns the first matched element’s height, But the height(value) method sets all matched elements height.

// Returns the height of the first matched element
$(selector).height()

// Set the height of the all matched elements
$(selector).height(value);

So with the help of the height() method, we will find the height of the div.

// Returns the height of the first matched div
$("div").height()

Example:




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <meta http-equiv="X-UA-Compatible" 
                    content="ie=edge">
      
    <!-- Link of jQuery CDN -->
    <script src=
    </script>
</head>
  
<body>
  
    <!-- div element -->
    <div style="color: red;
               background-color: black;
               margin: 80px 80px;
               padding: 40px 400px;">
        This is the div.
        <p></p>
          
        <button>
            Click to see the height of div
        </button>
    </div>
  
    <script>
  
        // After click btn, it will show
        // the height of the div
        $("button").click(function () {
  
            // Height of the div
            var height = $("div").height();
  
            // Show the height of the div
            $("p").html("height of the div :" + height);
        });
    </script>
</body>
  
</html>

Output:



Before clicking the button:

After clicking the button:

Method 2: jQuery use innerHeight() method to check inner height of an element including padding.

Syntax:

$("param").innerHeight()

Example:




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
  
    <style>
        #demo {
            height: 150px;
            width: 350px;
            padding: 10px;
            margin: 3px;
            border: 1px solid blue;
            background-color: lightgreen;
        }
    </style>
  
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                var msg = "";
                msg += "Inner Height of div: " + $("#demo").
                    innerHeight() + "</br>";
                $("#demo").html(msg);
            });
        });
    </script>
</head>
  
<body>
    <div id="demo"></div>
    <button>Click Me!!!</button>
      
    <p>
        Click on the button and check 
        the innerHeight of an element
        (includes padding).
    </p>
</body>
  
</html>

Output:
Before clicking on “Click Me” button:

After clicking on “Click Me” button:

Method 3: This approach uses outerHeight() method to find the outer height of the specified element. The outer height of an element includes padding and border.

Syntax:

$(selector).outerHeight(includeMargin)

Example: This example displays the outer height of an element.




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
  
    <!-- Style to create box using 
        padding and margin -->
    <style>
        .geeks {
            height: 80px;
            width: 200px;
            padding: 5px;
            margin: 5px;
            border: 2px solid black;
            background-color: green;
            text-align: center;
        }
    </style>
  
    <!-- Script to return outer height -->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                alert("Outer height of div: "
                    + $("div").outerHeight());
            });
        });
    </script>
</head>
  
<body>
    <div class="geeks">
        GeeksforGeeks
    </div>
  
    <button>
        Click Here to display outer height
    </button>
</body>
  
</html>               

Output:
Before Click on the button:

After Click on the button:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :