• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / jQuery / Get the Height of a Div Using jQuery

Get the Height of a Div Using jQuery

January 20, 2022 Leave a Comment

To get the height of a div using jQuery we can use two methods, the jQuery height() method or the outerHeight() method.

$("#div1").height();
$("#div2").outerHeight();

The main difference between the height() and outerHeight() methods is that the outerHeight() method will return the same thing as the height method, plus any padding and/or border-width that might be added to the element.

We find it most useful to know the height of an element including its padding and border, so in general, we prefer to use the outerHeight method.


Let’s say we have the following HTML:

<style>#div1 { padding: 10px; margin: 10px; }</style>
<div id="div1">
  <p>This paragraph is in a div that we want to get the height of.</p>
</div>

If we want to get the height of #div1, we will use the jQuery height() method in the following Javascript code.

$("#div1").height();

Since the div has padding in it, if we want to get the height of #div1 with padding, we would use the outerHeight() method;

$("#div1").outerHeight();

Finally, since the #div1 element also has a margin of 10px on all sides, if we want to get the height of #div1 including padding and margin, we would use the outerHeight method and pass the boolean value true in the method.

$("#div1").outerHeight(true);

If you are using WordPress, don’t forget to change the $ to jQuery as below:

jQuery("#div1").outerHeight();

Getting the height of an element can also be done using pure JavaScript with the offsetHeight property.

Using jQuery to Get and Change the Height of a div

In the example below, we create a div and the ability to add as many paragraphs as we want to the div. Each time we add a new paragraph to the div, it will increase the height of the div. We will then let the user check the height of the div whenever they want. Here is the initial HTML setup:

<style>#div2 { width:300px; border: 1px solid #444; padding: 5px; }</style>
<div id="div2">
  <div>This is some text.</div>
</div>
<div>
  <span>Click the button "Add text" below to add text and increase the height of the div.</span>
  <span>Click the "Get Height" button below to get the height value of #div2.</span>
  <span>Click the "Get Outer Height" button below to get the outerHeight value of #div2.</span>
</div>
<div id="click-me1" class="click-me">Add text</div>
<div id="click-me2" class="click-me">Get Height</div>
<div id="click-me3" class="click-me">Get Outer Height</div>
<div id="results"></div>
<br>

We can utilize both the jQuery click() method and jQuery appendTo() method to add new text to #div2.

Then use the height() and outerHeight() methods to get the height and height+padding+border-width values of #div2. Finally, we will use the jQuery text() method to display the new height results.

Here is the code:

$("#click-me1").click(function(){
    $('<div class="new-p">This is some more text.</div>').appendTo("#div2");
});
$("#click-me2").click(function(){
    var height1 = $("#div2").height();
    $("#results").text(height1);
});
$("#click-me3").click(function(){
    var height2 = $("#div2").outerHeight();
    $("#results").text(height2);
});

You will notice that the Outer Height will always return a height that is +12 on the height value. This is because there is padding of 5px on the top and bottom, and a border of 1px on the top and bottom of the div. Add those up and you get 12px.

The final code and output for this example is below:

Code Output:

This is some text.

Click the button “Add text” below to add text and increase the height of the div.
Click the “Get Height” button below to get the height value of #div2.
Click the “Get Outer Height” button below to get the outerHeight value of #div2.

Add text
Get Height
Get Outer Height

Full Code:

<style>#div2 { width:300px; border: 1px solid #444; padding: 5px; }</style>
<div id="div2">
  <div>This is some text.</div>
</div>
<br>
<div>
  <span>Click the button "Add text" below to add text and increase the height of the div.</span>
  <span>Click the "Get Height" button below to get the height value of #div2.</span>
  <span>Click the "Get Outer Height" button below to get the outerHeight value of #div2.</span>
</div>
<div id="click-me1" class="click-me">Add text</div>
<div id="click-me2" class="click-me">Get Height</div>
<div id="click-me3" class="click-me">Get Outer Height</div>
<div id="results"></div>

<script>

$("#click-me1").click(function(){
    $('<div class="new-p">This is some more text.</div>').appendTo("#div2");
});
$("#click-me2").click(function(){
    var height1 = $("#div2").height();
    $("#results").text(height1);
});
$("#click-me3").click(function(){
    var height2 = $("#div2").outerHeight();
    $("#results").text(height2);
});

</script>

Hopefully this article has helped you understand how to get the height of div using jQuery.

Other Articles You'll Also Like:

  • 1.  Using jQuery to Change the Id of a Div
  • 2.  jQuery insertBefore – Insert Element Before Another Element
  • 3.  jQuery insertAfter – Insert Element After Another Element
  • 4.  Using jQuery to Add id to div
  • 5.  Using jQuery to Get the Border Width of an Element
  • 6.  Using jQuery to Change the Text Color of a Paragraph
  • 7.  jQuery Get Last Child
  • 8.  Using jQuery to Hide a Div
  • 9.  jQuery append – Insert Element at End of Another Element
  • 10.  How to Filter a List of Divs with a Text Input Bar Using Javascript

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy