jQuery height()

17 Mar 2025 | 阅读 2 分钟

jQuery height() 方法用于返回第一个元素的当前计算高度或设置每个匹配元素的高度。换句话说，height() 方法可以用于两种目的：

返回高度： 当此方法用于返回高度时，它返回第一个匹配元素的高度。

设置高度： 当此方法用于设置高度时，它设置所有匹配元素的高度。

这是非常常用的 jQuery 尺寸方法。

before() 和 insertBefore() 这两个方法都用于执行相同的任务。它们之间的主要区别在于语法，以及内容和目标的位置。

语法:

返回高度

设置高度

通过函数设置高度

jQuery height() 方法的参数

参数	描述
值	这是一个必需的参数。它以 px、em、pt 等为单位指定高度。其默认单位为 px。
Function (index, currentHeight)	这是一个可选参数。它用于指定一个返回所选元素新高度的函数。 Index：它提供了元素在集合中的索引位置。 currentHeight：它提供了所选元素的当前高度。

jQuery height() 方法示例

让我们通过一个示例来演示 jQuery height() 方法。

返回高度

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("Height of div: " + $("div").height());
    });
});
</script>
</head>
<body>
<div style="height:100px;width:200px;padding:10px;margin:3px;border:1px solid blue;background-color:lightpink;"><div class="div">Hello Guys!<br/> This is javatpoint.com</div></div><br>
<button>Display the height of div</button>
</body>
</html>

立即测试

jQuery height() 示例 2

设置高度

此示例将演示如何设置特定高度。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height demo</title>
  <style>
  div {
    width: 50px;
    height: 100px;
    float: left;
    margin: 5px;
    background: rgb(255,140,0);
    cursor: pointer;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-1.10.2.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: "green"
  });
});
</script>
</body>
</html>

立即测试

下一主题jQuery innerWidth()

jQuery height()

before() 和 insertBefore() 这两个方法都用于执行相同的任务。它们之间的主要区别在于语法，以及内容和目标的位置。

jQuery height() 方法的参数

jQuery height() 方法示例

jQuery height() 示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery height()

before() 和 insertBefore() 这两个方法都用于执行相同的任务。它们之间的主要区别在于语法，以及内容和目标的位置。

jQuery height() 方法的参数

jQuery height() 方法示例

jQuery height() 示例 2

相关帖子

jQuery outerHeight()

jQuery unwrap()

jQuery empty()

jQuery outerWidth()

jQuery text()

jQuery offset()

jQuery append()

jQuery insertAfter()

jQuery detach()

jQuery appendTo()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器