jQuery height() function is used to get the current computed height for the first element in the set of matched elements or sets the height of every matched element
We will see below two variations of this method:
- height() - get the current computed height for the first element in the set of matched elements
- height( value ) - sets the height of every matched element
jQuery height() function
This jQuery height() function is used to get the current computed height for the first element in the set of matched elements.
Syntax
height()
This method does not accept any arguments. Example: This method is also able to find the height of the window and document.
// Returns height of browser viewport
$( window ).height();
// Returns height of HTML document
$( document ).height();
Example
Show various heights. Note the values are from the iframe so it might be smaller than you expected. The yellow highlight shows the iframe body.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>height demo</title>
<style>
body {
background: yellow;
}
button {
font-size: 12px;
margin: 2px;
}
p {
width: 150px;
border: 1px red solid;
}
div {
color: red;
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<button id="getp">Get Paragraph Height</button>
<button id="getd">Get Document Height</button>
<button id="getw">Get Window Height</button>
<div> </div>
<p>
Sample paragraph to test height
</p>
<script>
function showHeight(element, height) {
$("div").text("The height for the " + element + " is " + height + "px.");
}
$("#getp").click(function() {
showHeight("paragraph", $("p").height());
});
$("#getd").click(function() {
showHeight("document", $(document).height());
});
$("#getw").click(function() {
showHeight("window", $(window).height());
});
</script>
</body>
</html>
jQuery height( value ) function
This function is used to set the CSS height of every matched element.
Syntax
height( value )
value - An integer representing the number of pixels, or an integer with an optional unit of measure appended (as a string).
Example
To set the height of each div on click to 50px plus a color change.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>height demo</title>
<style>
div {
width: 50px;
height: 70px;
float: left;
margin: 5px;
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(50).css({
cursor: "auto",
backgroundColor: "red"
});
});
</script>
</body>
</html>
Comments
Post a Comment