How to get the height of a div using jQuery ? - GeeksforGeeks

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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </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.
CSS-Misc
HTML-Misc
jQuery-Misc
Picked
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)