博客

jQuery height()和innerHeight()方法

  • Post category:jquery

当我们在开发网页时，经常需要获取或设置元素的尺寸信息。jQuery提供了两个常用的方法来获取元素的高度信息：height() 和 innerHeight()。接下来我们将详细讲解这两个方法的完整攻略。

jQuery height()方法

height() 方法用来获取或设置元素的高度，返回的是元素的内容区域的高度值。具体使用方法如下：

获取元素高度

$(selector).height();

调用该方法并不需要传任何参数，它会返回选中元素的高度值。

下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    #box {background-color: #f5f5f5; border: 1px solid #ccc; padding: 15px;}
  </style>
</head>
<body>
  <div id="box">我是一个盒子</div>
  <script>
    let boxHeight = $('#box').height();
    console.log('boxHeight：' + boxHeight); // 输出：boxHeight：45
  </script>
</body>
</html>

设置元素高度

$(selector).height(value);

调用该方法需要传入一个参数，参数表示需要设置的高度值（参数必须是数字类型）。这个方法会改变选中元素的高度，并返回选中元素对象。

下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    #box {background-color: #f5f5f5; border: 1px solid #ccc; padding: 15px;}
  </style>
</head>
<body>
  <div id="box">我是一个盒子</div>
  <script>
    $('#box').height(100);
    let boxHeight = $('#box').height();
    console.log('boxHeight：' + boxHeight); // 输出：boxHeight：100
  </script>
</body>
</html>

从上面的代码可以看到，我们先调用了 height(100) 方法来设置元素的高度值为100px，然后使用 height() 来获取元素的高度值，输出结果显示已经变成了100px。

jQuery innerHeight()方法

innerHeight() 方法用来获取元素的高度，返回的是包括内边距（padding）和边框（border）的高度值。具体使用方法如下：

获取元素内部高度

$(selector).innerHeight();

调用该方法并不需要传任何参数，它会返回选中元素的内部高度值。

下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    #box {background-color: #f5f5f5; border: 1px solid #ccc; padding: 15px;}
  </style>
</head>
<body>
  <div id="box">我是一个盒子</div>
  <script>
    let innerBoxHeight = $('#box').innerHeight();
    console.log('innerBoxHeight：' + innerBoxHeight); // 输出：innerBoxHeight：47
  </script>
</body>
</html>

设置元素内部高度

由于 innerHeight() 方法只是获取元素内部的高度，因此并不适用于设置元素高度。

总结

以上就是 height() 和 innerHeight() 方法的完整攻略内容。通过本文，我们可以了解到这两个方法都是用来获取元素的高度信息的，并且它们的返回值都是像素值（px）。需要注意的是，height() 返回的是元素内容的高度值，而 innerHeight() 返回的是包括内边距和边框的（整个盒子）高度值。

Tags: