jQuery中outerHeight()方法用法实例

概述

outerHeight()方法是jQuery中一个常用的方法，用于获取元素的大小，包括边框（border）、内边距（padding）、外边距（margin）和元素的高度（height）。

语法

outerHeight([includeMargin])
其中，可选参数includeMargin是一个布尔值，表示是否将元素的外边距（margin）计入元素的高度（height）。

实例

示例一

以下示例演示如何使用outerHeight()方法获取元素的高度和宽度：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery outerHeight Method Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      padding: 20px;
      margin: 50px;
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <div></div>
  <p>高度：<span id="height"></span></p>
  <p>宽度：<span id="width"></span></p>
  <script>
    var div = $('div');
    $('#height').text(div.outerHeight());
    $('#width').text(div.outerWidth());
  </script>
</body>
</html>

本示例中，使用$('div')选中一个div元素，并使用outerHeight()和outerWidth()方法分别获取元素的高度和宽度，并将结果输出到页面上。

示例二

以下示例演示如何使用outerHeight(true)方法获取元素的高度，其中将元素的外边距计入元素的高度：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery outerHeight Method Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      padding: 20px;
      margin: 50px;
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <div></div>
  <p>高度：<span id="height"></span></p>
  <script>
    var div = $('div');
    $('#height').text(div.outerHeight(true));
  </script>
</body>
</html>

在本示例中，使用$('div')选中一个div元素，并使用outerHeight(true)方法获取元素的高度并将元素的外边距计入元素的高度，并将结果输出到页面上。