jQuery .height() method gets and sets height of selected elements
.height() (getter) Syntax and Description
.height() (getter)
gets the current computed height for the first
element in the set of matched elements.
.height() (getter) has no parameter and its return value
is the height of the element in pixels.
.height() returns a unitless pixel value (for example, 400).
.css('height') returns a value with units intact (for example, 400px).
.height(value) (setter) Syntax and Description
.height(value) (setter) sets the CSS height of each element in the set of matched elements.
value is an integer representing the number of
pixels, or an integer with an optional unit of measure appended.
The return object is the jQuery object, for chaining purposes.
When calling .height(value), the value
can be either a string (number and unit) or
a number. If only a number is provided for the value,
jQuery assumes a pixel unit.
If a string is provided, any valid CSS measurement may be used for the height (such as 100px, 50%, or auto).
Get the whole document height
The following code gets document height.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- ww w. ja va2s . co m-->
alert($(document).height());
});
</script>
<style>
div{
width:200px;
height:100px;
overflow:auto;
}
h1 { width:1000px;height:1000px; }
</style>
</head>
<body>
<body>
<div><h1>java2s.com</h1></div>
</body>
</html>
Get the height for a tag
The following code gets the tag height.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w ww . j a va 2 s .c o m-->
alert($("div").height());
});
</script>
<style>
div{
width:200px;
height:100px;
overflow:auto;
}
h1 { width:1000px;height:1000px; }
</style>
</head>
<body>
<body>
<div><h1>java2 s. com</h1></div>
</body>
</html>
Set the height for a div element
The following code sets the height for a div element.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from ww w. j av a 2 s .co m-->
$("div").height(300);
});
</script>
<style>
div{
width:200px;
height:100px;
overflow:auto;
}
h1 { width:1000px;height:1000px; }
</style>
</head>
<body>
<div><h1>java2s.com</h1></div>
</body>
</html>
Change the window height
Window height can be changed by using height method as well.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from ww w. j a va 2 s.co m-->
alert($(window).height());
});
</script>
</head>
<body>
<p>Hello</p><p>java2s.com</p>
</body>
</html>
Click to get the height
The following code passes the value from .height() to a function.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- www. j ava2 s . c om-->
function showHeight(ele, h) {
alert( h + "px.");
}
$("p").click(function () {
showHeight("paragraph", $("p").height());
});
});
</script>
</head>
<body>
<p>Hello</p><p>Paragraph</p>
</body>
</html>
Chain height function with style setting
The following code chains the .height()
function with .css() method.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w ww . ja v a2s .com-->
$("div").one('click', function () {
$(this).height(30).css({cursor:"auto", backgroundColor:"green"});
});
});
</script>
<style>
div {
width:50px;
height:70px;
float:left;
margin:5px;
background:rgb(255,140,0);
cursor:pointer;
}
</style>
</head>
<body>
<div></div>
<div>java2s.com</div>
</body>
</html>