JavaScript Tutorial/jQuery/height
Содержание
Get document height
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($(document).height());
});
</script>
<style>
div{
width:200px;
height:100px;
overflow:auto;
}
h1 { width:1000px;height:1000px; }
</style>
</head>
<body>
<body>
<div><h1>header 1</h1></div>
</body>
</html>
Get tag height
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($("div").height());
});
</script>
<style>
div{
width:200px;
height:100px;
overflow:auto;
}
h1 { width:1000px;height:1000px; }
</style>
</head>
<body>
<body>
<div><h1>header 1</h1></div>
</body>
</html>
height(): find the height of the window and document.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function showHeight(ele, h) {
alert( h + "px.");
}
$("p").click(function () {
showHeight("paragraph", $("p").height());
});
});
</script>
</head>
<body>
<body>
<p>Hello</p><p>Paragraph</p>
</body>
</html>
height(val): If no explicit unit was specified (like "em" or "%") then "px" is concatenated to the value.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("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>
<body>
<div></div>
<div></div>
</body>
</html>
Set height to
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").height(300);
});
</script>
<style>
div{
width:200px;
height:100px;
overflow:auto;
}
h1 { width:1000px;height:1000px; }
</style>
</head>
<body>
<body>
<div><h1>header 1</h1></div>
</body>
</html>
Window height
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($(window).height());
});
</script>
</head>
<body>
<body>
<p>Hello</p><p>Paragraph</p>
</body>
</html>