jQuery CSS 操作 - height() 方法 实例详解
jQuery 2022-06-01 17:15:24小码哥的IT人生shichen
jQuery CSS 操作 - height() 方法
实例
设置 <p> 元素的高度：
$(".btn1").click(function(){
$("p").height(50);
});
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").height(50);
});
});
</script>
</head>
<body>
<p style="background-color:yellow">This is a paragraph.</p>
<button class="btn1">改变高度</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
height() 方法返回或设置匹配元素的高度。
返回高度
返回第一个匹配元素的高度。
如果不为该方法设置参数，则返回以像素计的匹配元素的高度。
语法
$(selector).height()
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("span").text($("p").height());
});
});
</script>
</head>
<body>
<p>本段落的高度是 <span>unknown</span> px。</p>
<button class="btn1">获得高度</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
设置高度
设置所有匹配元素的高度。
语法
$(selector).height(length)
| 参数 | 描述 |
|---|---|
| length |
可选。规定元素的高度。 如果没有规定长度单位，则使用默认的 px 单位。 |
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").height(50);
});
});
</script>
</head>
<body>
<p style="background-color:yellow">This is a paragraph.</p>
<button class="btn1">改变高度</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
使用函数来设置高度
使用函数来设置所有匹配元素的高度。
语法
$(selector).height(function(index,oldheight))
| 参数 | 描述 |
|---|---|
| function(index,oldheight) |
规定返回被选元素新高度的函数。
|
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").height(function(n,c){
return c+10;
});
});
});
</script>
</head>
<body>
<p style="background-color:yellow">这是一个段落.</p>
<button>以 10 像素的幅度增加 p 元素的高度</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
亲自试一试 - 实例
完整实例【获得文档和窗口元素的高度】：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("#span1").text($(window).height());
$("#span2").text($(document).height());
});
});
</script>
</head>
<body>
<p>窗口的高度是 <span id="span1">unknown</span> px。</p>
<p>文档的高度是 <span id="span2">unknown</span> px。</p>
<button class="btn1">获得高度</button>
<p>在本例中，窗口和文档的高度是相同的，因为它们在 iframe 中显示。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
使用 height() 方法来获得 document 和 window 元素的当前高度。
完整实例【使用 em 和 % 值来设置高度】：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").height("50%");
});
$(".btn2").click(function(){
$("p").height("20em");
});
});
</script>
</head>
<body>
<p style="background-color:yellow">This is a paragraph.</p>
<button class="btn1">把高度设置为 50%</button>
<button class="btn2">把高度设置为 20 em</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
使用指定的长度单位来设置元素的高度。
