.height() method in Jquery

Thiyagu

8 years ago

Description:

The jQuery height() method is used to GET/SET the height for the selected element. In simple, height() method can be split in to two purposes

GET height: It will return the height for the selected/matched element
SET height: It will set the height for the selected/matched element

Syntax

$(selector).height()
$(selector).height(value)
$(selector).height(function(index,currentheight))

Value	It specifies the height in px, pt, em, etc. In default it treat as px.
function(index,currentclass)	A function that returns one or more class names to remove index : Returns the index position of the matched element currentclass : Returns the current class name of the matched element

Difference between .css(“height”) & .height():

.css( “height” ) : It will returns with unit value (for example, 200px)
.height() : It return with units less (for example, 200).

When to use?

If we need to perform some mathematical calculation based on the element’s height then we can use .height().

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .defaultClass {
 border: 5px solid #eed5b7;
 padding: 10px;
 width: 50px;
 height: 50px;
 background-color: red;
 display:inline-block;
 }
 
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('.defaultClass').height(20).css({ backgroundColor: '#4cff00' })
 $('#divCurrentHeight').text(" Current Div height is: "+ $('.defaultClass').height());
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">SET/GET height() CSS property</button><br/><br />
 <div id="divbox1" class="defaultClass">
 </div>
 <div id="divbox2" class="defaultClass">
 </div>
 <br /><br />
 <div id="divCurrentHeight"></div>
</body>
</html>

<html>

<head>

<style>

.defaultClass {

border: 5px solid #eed5b7;

padding: 10px;

width: 50px;

height: 50px;

background-color: red;

display:inline-block;

}

</style>

$(document).ready(function () {

$('.btnClass').click(function () {

$('.defaultClass').height(20).css({ backgroundColor: '#4cff00' })

$('#divCurrentHeight').text(" Current Div height is: "+ $('.defaultClass').height());

})

});

</script>

</head>

<body>

<button class="btnClass" id="addMethod">SET/GET height() CSS property</button><br/><br />

</div>

</div>

</body>

</html>

Output:

Clicking on button, the .height(20) method will set height as 20 for the selected element and .height() method will GET the height of the selected div .