jQuery中height()方法用法实例

概述

height()方法是jQuery中用于获取或设置元素高度的方法。它可以用于内联元素（如<span>）和块级元素（如<div>）以及其他一些元素。

用法示例

获取元素高度

可以通过height()方法获取元素的高度，语法如下：

$(selector).height();

其中，selector表示要获取高度的元素的选择器，可以是标签名、类名、ID 名或者其他选择器。例如：

// 获取 ID 为 element 的元素的高度
$("#element").height(); 

// 获取所有 class 为 element 的元素的高度（假设页面中有多个这样的元素）
$(".element").height();

需要注意的是，使用height()方法获取的高度值不包含元素的内边距（padding）、边框（border）和外边距（margin），仅仅是元素自身的高度值。

设置元素高度

同样可以使用height()方法来设置元素的高度，语法如下：

$(selector).height(value);

其中，value表示要设置的高度值，可以是一个数字（单位为像素），或者一个字符串（例如"100px"）。例如：

// 设置 ID 为 element 的元素高度为 200 像素
$("#element").height(200); 

// 设置所有 class 为 element 的元素的高度为 300 像素（假设页面中有多个这样的元素）
$(".element").height("300px");

需要注意的是，设置的高度值将会覆盖元素本身的高度值，而不会影响元素的内边距、边框和外边距。而且，如果需要设置的高度值小于元素本身的高度值，元素的内容可能会被裁剪隐藏。

示例说明

示例一：获取元素高度

假设我们有一个<div>元素，它的ID是myDiv，CSS样式设置为：

#myDiv {
  height: 200px;
  padding: 10px;
  border: 1px solid #ccc;
}

在JavaScript代码中，我们可以使用height()方法获取它的高度：

var height = $("#myDiv").height();
console.log(height); // 输出：200

可以看到，使用height()方法获取的高度值是200，即使该元素还存在内边距和边框，也不会影响获取到的高度值。

示例二：设置元素高度

假设我们有一个<div>元素，它的ID是myDiv，CSS样式设置为：

#myDiv {
  height: 100px;
}

在JavaScript代码中，我们可以使用height()方法设置它的高度：

$("#myDiv").height(200);

上面的代码会将myDiv元素的高度设置为200px。如果此时该元素有任何的内边距、边框和外边距，那么它们的尺寸将不会受到影响，只有元素本身的高度值会被改变。