jQuery 提供了一系列方法来获取和设置元素的尺寸，这对于页面布局和动态效果非常有用。下面详细介绍常用的尺寸方法：

1. 获取和设置宽度与高度

  • .width() 与 .height()
    • 获取：
      返回第一个匹配元素的宽度或高度，不包括内边距（padding）、边框（border）和外边距（margin）。 var w = $("#myDiv").width(); var h = $("#myDiv").height(); console.log("宽度：" + w + ", 高度：" + h);
    • 设置：
      可以传入一个数值（会自动添加 px 单位）或带单位的字符串。 $("#myDiv").width(300); // 设置宽度为300px $("#myDiv").height("200px"); // 设置高度为200px

2. 包含内边距的尺寸

  • .innerWidth() 与 .innerHeight()
    • 返回匹配元素的宽度或高度，包括内边距，但不包括边框和外边距。 var innerW = $("#myDiv").innerWidth(); var innerH = $("#myDiv").innerHeight(); console.log("内宽：" + innerW + ", 内高：" + innerH);

3. 包括边框（和可选外边距）的尺寸

  • .outerWidth() 与 .outerHeight()
    • 默认返回值包括内边距和边框。
    • 如果传入参数 true，则还会包含外边距。 // 不包含外边距 var outerW = $("#myDiv").outerWidth(); var outerH = $("#myDiv").outerHeight(); // 包含外边距 var outerWWithMargin = $("#myDiv").outerWidth(true); var outerHWithMargin = $("#myDiv").outerHeight(true); console.log("外宽：" + outerW + ", 含外边距宽：" + outerWWithMargin);

4. 获取元素相对于文档的位置

  • .offset()
    • 返回一个包含元素在文档中相对于左上角坐标的对象，通常具有 top 和 left 属性。 var pos = $("#myDiv").offset(); console.log("文档中的位置 - 左：" + pos.left + ", 上：" + pos.top);

这些方法可以单独使用，也可以在动态布局、动画效果或响应式设计中组合使用，帮助你精确控制页面元素的尺寸和位置。