jQuery 尺寸

jQuery - 处理元素尺寸

jQuery 简化了获取和设置 HTML 元素以及浏览器窗口的尺寸（宽度和高度）。

jQuery 尺寸方法

jQuery 提供了几种与元素尺寸交互的方法：

width() / height(): 获取或设置元素内容区域的计算宽度/高度。
innerWidth() / innerHeight(): 获取包含内边距（padding）但不包括边框（border）的计算宽度/高度。
outerWidth() / outerHeight(): 获取包含内边距（padding）和边框（border）的计算宽度/高度。
outerWidth(true) / outerHeight(true): 获取包含内边距（padding）、边框（border）和外边距（margin）的计算宽度/高度。

理解盒模型

这些方法直接与 CSS 盒模型相关。将元素想象成一系列同心方框：

内容区（Content）：文本和图片出现的区域。width() 和 height() 与此相关。
内边距（Padding）：清除内容区周围的区域。透明。innerWidth() 和 innerHeight() 包含此区域。
边框（Border）：围绕内边距和内容区的边框。outerWidth() 和 outerHeight()（不带 true 参数）包含此区域。
外边距（Margin）：清除边框外部的区域。透明。outerWidth(true) 和 outerHeight(true) 包含此区域。

文本表示示意图：

-------------------------------------
| 外边距（Margin）                      |
|   -------------------------   |
|   | 边框（Border）              |   |
|   |   -----------------   |   |
|   |   | 内边距（Padding）   |   |   |
|   |   |   -----------   |   |   |
|   |   |   | 内容区  |   |   |   |
|   |   |   -----------   |   |   |
|   |   -----------------   |   |
|   -------------------------   |
-------------------------------------

box-sizing 注意事项：CSS 属性 box-sizing: border-box; 会改变盒模型的计算方式。当设置此属性时，元素的 width 和 height 属性（在 CSS 中设置的）定义了包含内边距和边框的总宽度/高度。内容区会缩小以容纳内边距和边框。尽管如此，jQuery 尺寸方法仍然根据上述标准盒模型定义返回计算的计算值，但如果 border-box 生效，则初始 CSS width/height 将对应于 outerWidth/outerHeight。

强烈建议全局设置 box-sizing: border-box; 以实现更直观的布局控制：*, *::before, *::after { box-sizing: border-box; }

jQuery width() 和 height() 方法

获取或设置集合中第一个元素内容区域的当前计算宽度/高度。

示例：获取尺寸：

// 假设有一个带有 CSS 样式的 div 元素，其 id 为 'box1'
$("#getDimensionsBtn").click(function() {
  const $box = $("#box1");
  const boxWidth = $box.width();
  const boxHeight = $box.height();
  $box.html(`内容宽度: ${boxWidth}px<br>内容高度: ${boxHeight}px`);
});

jQuery innerWidth() 和 innerHeight() 方法

获取集合中第一个元素的当前计算内部宽度/高度（包括内边距）。

示例：

// 假设 div#box1 元素带有内边距
$("#getInnerDimensionsBtn").click(function() {
  const $box = $("#box1");
  const innerW = $box.innerWidth();
  const innerH = $box.innerHeight();
  $box.append(`<br>内部宽度（含内边距）: ${innerW}px<br>内部高度（含内边距）: ${innerH}px`);
});

jQuery outerWidth() 和 outerHeight() 方法

获取当前计算的外部宽度/高度（包括内边距和边框）。传递 true 作为参数以同时包含外边距。

示例：

// 假设 div#box1 元素带有内边距、边框和外边距
$("#getOuterDimensionsBtn").click(function() {
  const $box = $("#box1");
  const outerW = $box.outerWidth(); // 包括内边距 + 边框
  const outerH = $box.outerHeight(); // 包括内边距 + 边框
  const outerW_Margin = $box.outerWidth(true); // 包括内边距 + 边框 + 外边距
  const outerH_Margin = $box.outerHeight(true); // 包括内边距 + 边框 + 外边距

  $box.append(`<br>外部宽度（含内边距 + 边框）: ${outerW}px`);
  $box.append(`<br>外部高度（含内边距 + 边框）: ${outerH}px`);
  $box.append(`<br>外部宽度（含内边距 + 边框 + 外边距）: ${outerW_Margin}px`);
  $box.append(`<br>外部高度（含内边距 + 边框 + 外边距）: ${outerH_Margin}px`);
});

文档和窗口尺寸

你还可以获取整个 HTML 文档或浏览器视口（窗口）的尺寸：

$("#getDocWinDimensionsBtn").click(function() {
  const docWidth = $(document).width();
  const docHeight = $(document).height();
  const winWidth = $(window).width();
  const winHeight = $(window).height();

  const info = `文档 宽x高: ${docWidth} x ${docHeight}\n窗口 宽x高: ${winWidth} x ${winHeight}`;
  alert(info);
  console.log(info);
});

注意：$(window).width() 通常代表不包括滚动条的视口宽度，而 window.innerWidth 包括滚动条。不同浏览器之间的行为可能略有差异。

设置尺寸

你可以使用 width() 和 height() 方法来设置元素的尺寸。请记住，这会设置内容区的宽度/高度，除非应用了 box-sizing: border-box;。

示例：设置 div 的宽度和高度：

$("#resizeBoxBtn").click(function() {
  $("#box1").width(300).height(150); // 将内容宽度设置为 300px，高度设置为 150px
  console.log('已设置盒子的尺寸。');
});

jQuery CSS 参考手册

要获取所有 jQuery CSS 和尺寸相关方法的完整概述，请参考官方的 jQuery CSS 文档和 jQuery 尺寸文档。