• 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 / JavaScript / Using JavaScript to Get the Height of an Element

Using JavaScript to Get the Height of an Element

February 26, 2022 Leave a Comment

We can use JavaScript to get the height of an element by using the offsetHeight property.

document.getElementById("div2").offsetHeight;

You can also get the height of an element using the height property, but one problem we see a lot is if no height is set for the element, nothing will be returned for height. This is why we prefer to always use the offsetHeight property to get the height of an element. Also, note that the offsetHeight property will return the height of the element plus any padding and/or border-width that might be added to the element.


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 with padding, we would use the offsetHeight property;

document.getElementById("div1").offsetHeight;

Getting the height of an element can also be done using jQuery with the height() and outerHeight() methods.

Using JavaScript to Get and Change the Height of an Element

In the example below, we will 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 id="click-me1" onclick="addText()" class="click-me">Add text</div>
<div id="click-me2" onclick="getHeight()" class="click-me">Get Height</div>
<div id="results"></div>

We can utilize both an onclick event and the innerHTML property to add new text to #div2.

Then we can use the offsetHeight property to get the height value of #div2. Finally, we will use the textContent property to display the new height results.

Here is the code:

function addText(){
  var currHTML = document.getElementById("div2").innerHTML;
  currHTML += '<div class="new-p">This is some more text.</div>'
  document.getElementById("div2").innerHTML = currHTML;
};
function getHeight(){
  var height1 = document.getElementById("div2").offsetHeight;
  document.getElementById("results").textContent = height1;
};

The final code and output for this example is below:

Code Output:

This is some text.

Add text
Get Height

Full Code:

<style>#div2 { width:300px; border: 1px solid #444; padding: 5px; }</style>
<div id="div2">
  <div>This is some text.</div>
</div>
<div id="click-me1" onclick="addText()" class="click-me">Add text</div>
<div id="click-me2" onclick="getHeight()" class="click-me">Get Height</div>
<div id="results"></div>

<script>

function addText(){
  var currHTML = document.getElementById("div2").innerHTML;
  currHTML += '<div class="new-p">This is some more text.</div>';
  document.getElementById("div2").innerHTML = currHTML;
};
function getHeight(){
  var height1 = document.getElementById("div2").offsetHeight;
  document.getElementById("results").textContent = height1;
};

</script>

Hopefully this article has helped you understand how to use JavaScript to get the height of an element.

Other Articles You'll Also Like:

  • 1.  JavaScript onkeyup – How to Use onkeyup Event with JavaScript
  • 2.  Using JavaScript to Calculate Average of Array of Numbers
  • 3.  Using JavaScript to Get a Random Number Between 1 and 100
  • 4.  Convert an Array of Values into a String Without Commas in JavaScript
  • 5.  JavaScript Random Number – How to Generate a Random Number In JavaScript
  • 6.  Using JavaScript to Add to Array
  • 7.  JavaScript join – Create String from Elements in an Array
  • 8.  Subtract All Numbers in an Array Using JavaScript
  • 9.  Get the Sum of Array in JavaScript
  • 10.  JavaScript cosh – Find Hyperbolic Cosine of Number Using Math.cosh()

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