Skip to content
Related Articles

Related Articles

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>               

chevron_right


Output:
Before Click on the button:

After Click on the button:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :