Get DIV height in JavaScript

I’m going to show you how to get DIV height in JavaScript.

I was in a situation when I have to animate a div by maintaining/grabbing/pausing its current height first but its height is not specified in the CSS and is dynamic.

Anyway, this tutorial will focus on how to get the dynamic div’s height.

Here’s a live demo and script:

View Live Demo here
<html>
    <head>
        <title>jquery get dynamic div height</title>
        <!– just some styles –>
        <style type=‘text/css’>
        #div_1{
           width:150px;
            border:thin solid red; 
            float:left;
        }
        .btn{
            padding:10px; 
        }
        </style>
    </head>
<body>
 
<!– the div with some contents in which we will get the height –>
<div id=‘div_1′>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
dapibus, mauris ac feugiat bibendum. 
</div>
 
<!– onClick of this button, some text will be added and display the div_1 height –>
<input type=‘button’ class=‘btn’ id=‘add_text’ value=‘Add Text and Get New Height’ />
 
<!– This will display the current height –>
<div id=‘result’></div>
 
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”>
</script>
<script type=‘text/javascript’>
$(document).ready(function() {
    //load the current height
    get_div_height();
 
    $(“#add_text”).click(function(){
        //append the some text to change current height
        $(“#div_1″).append(“The Code of a Ninja.”);
         
        //load the new height
        get_div_height();
    });
 
    //function to get current div_1 height
    function get_div_height(){
        var div_height = $(“#div_1″).height();
        $(“#result”).html(“div height is: “ + div_height + ” px”);
    }
     
});
</script>
 
</body>
</html>

You can also get your browser’s current window height by doing:

    $(window).height()

and your document’s height (height of html document) by:

    $(document).height()

more info on this link. :)

By Mike Dalisay

I'm Mike Dalisay, a pro web developer since 2010. I love web development. Improving our tutorials and source codes makes me happy. Do you want to suggest an edit to our tutorial? Got something to ask about our source codes? You may use our comments section below or email our team at [email protected]

2 comments

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top