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:
<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()
Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]
I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.