Updated March 28, 2023
Introduction to jQuery height() Method
The height() method determines or returns the height of the specified elements. While using such a method to return the height, the height of the matched element FIRST returns and when using such a method to set height, the height of the all matched elements will be set. jQuery height() method is preferred when a mathematical computation involves using the height of an element. Such an approach can also determine window and document height. When the element or its parent is hidden the value specified by the height() method is not assured to be accurate. Verify the element is noticeable before using the height() method to get an accurate result.
Syntax:
$(selector).height ()It is used to return the height for the element.
$(selector).height(value)It is used to set the height for the specific element.
$(selector).height (function (index, currentheight))It is used to set the height for the particular element using a function.
Parameters and Description
- value: It is a required parameter for setting the height of an element. The height can be specified in px, em, pt. The default unit is px.
- function (index, currentheight): It is an optional parameter which specifies a function that provides the new height of selected elements.
- index: It returns the index position of the selected element in the given set.
- currentheight: It returns the current height of the selected element in the given set.
Benefits of height() Method:
- It can be used when the height of an element is needed in a mathematical calculation.
- It returns the height of content irrespective of the value of the CSS box-size property.
Working of jQuery height() Method
jQuery makes it easy for you to work with the dimensions of the elements and even the browser window by using the height() method for finding the dimensions, or alternatively the inner width or inner height or outer width or outer height depending on the measurements you need. The height of the element will simplify the calculated size of an element. jQuery height() method will set new dimensions for an element, just by giving a parameter with the new value.
Examples of jQuery height()
Below are the examples of jQuery height():
Example #1
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery height() method</title>
<style>
body {
background: grey;
}
button {
font-size: 10px;
margin: 4px;
}
p {
width: 150px;
border: 1px green solid;
}
div {
color: cyan;
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<p>
Click on below buttons to get various types heights ...
</p>
<button id="para_hgt"> Click here to get height of the paragraph </button>
<button id="doc_hgt"> Click here to get height of the Document </button>
<button id="wind_hgt"> Click here to get height of the window </button>
<div> </div>
<script>
function showHeight( element, height ) {
$( "div" ).text( "The height for the " + element + " is " + height + "px." );
}
$( "#para_hgt" ).click(function() {
showHeight( "paragraph", $( "p" ).height() );
});
$( "#doc_hgt" ).click(function() {
showHeight( "document", $( document ).height() );
});
$( "#wind_hgt" ).click(function() {
showHeight( "window", $( window ).height() );
});
</script>
</body>
</html>Output:
As shown in the above image, when you click on every button you will get the height of the paragraph, document, and window.
Example #2
Code:
<html>
<head>
<meta charset="utf-8">
<title>jQuery height() method</title>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function showHeight(element, hgt) {
alert( hgt + "px.");
}
$("p").click(function () {
showHeight("paragraph", $("p").height());
});
});
</script>
</head>
<body>
<body>
<p> Hello World .... </p> <p> EDUCBA </p>
</body>
</html>Output:
In the above output, when you click on the text, it will display the font size of the element in the alert box.
Example #3
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> jQuery height() method </title>
<style>
div {
width: 40px;
height: 80px;
float: left;
margin: 8px;
background: rgb(255,140,0);
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<script>
$( "div" ).one( "click", function() {
$( this ).height( 40 ).css({
cursor: "auto",
backgroundColor: "grey"
});
});
</script>
</body>
</html>Output:
Example #4
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> jQuery height() method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").height(function(n,c){
return c+100;
});
});
});
</script>
</head>
<body>
<button> Click on the button to increase the height of the div </button> <br> <br>
<div style="height:150px; border:2px dotted;"></div>
</body>
</html>Output:
Example #5
Code:
<html>
<head>
<meta charset="utf-8">
<title> jQuery height() method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
var msg = "";
msg += "The inner height of div element is : " + $("#hgt_demo").
innerHeight() + "</br>";
$("#hgt_demo").html(msg);
});
});
</script>
</head>
<style>
#hgt_demo {
height: 160px;
width: 330px;
padding: 15px;
margin: 2px;
border: 1px solid blue;
background-color: green;
}
</style>
<body>
<div id="hgt_demo"></div>
<button> Click Here... </button>
<p> Click on the above button to check the inner height of an element... </p>
</body>
</html>Output:
In the output, when you click on the button, it will display the inner height of the element on the page.
Example #6
Code:
<html>
<head>
<meta charset="utf-8">
<title> jQuery height() method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
var msg = "";
msg += "The height of div element is : " + $("#hgt_demo").
height() + "</br>";
$("#hgt_demo").html(msg);
});
});
</script>
</head>
<style>
#hgt_demo {
height: 160px;
width: 330px;
padding: 15px;
margin: 2px;
border: 1px solid blue;
background-color: green;
}
</style>
<body>
<div id="hgt_demo"></div>
<button> Click Here... </button>
<p> Click on the above button to check the height of an element without including padding... </p>
</body>
</html>Output:
In the output, when you click on the button, it will display the height of the element on the page.
Conclusion
So far, now we have seen jQuery’s built-in method called height() to measure the height of an element. But that won’t check the element’s padding, border, and margin. Remember that height(value) sets the box’s content height irrespective of the CSS box-sizing value of the property. When you are using the value for height (), then the value can be either a string or an integer. If there is only a number in the value, then jQuery assumes a pixel unit.
Recommended Articles
This is a guide to jQuery height(). Here we discuss the working of jQuery height() Method and its Examples along with its Code Implementation. You can also go through our other suggested articles to learn more –
