jQuery 的 css() 方法可以用来获取或设置匹配元素的 CSS 样式属性，其用法非常灵活。下面详细介绍其几种常见用法：

1. 获取 CSS 属性值

  • 语法： $(selector).css("propertyName");
  • 说明： 当用于获取属性时，该方法返回匹配集合中第一个元素指定的 CSS 属性值。
  • 示例： // 获取第一个 <p> 元素的背景色 var bgColor = $("p").css("background-color"); console.log(bgColor);

2. 设置单个 CSS 属性

  • 语法： $(selector).css("propertyName", "value");
  • 说明： 这会将所有匹配的元素的指定 CSS 属性设置为给定的值。
  • 示例： // 将所有 <p> 元素的文字颜色设置为红色 $("p").css("color", "red");

3. 设置多个 CSS 属性

  • 语法： $(selector).css({ "property1": "value1", "property2": "value2", ... });
  • 说明： 使用一个对象可以一次性设置多个 CSS 样式属性，是设置大量样式时的最佳方式。
  • 示例： // 同时设置背景颜色和字体大小 $("p").css({ "background-color": "yellow", "font-size": "200%" });

4. 使用函数设置 CSS 属性

  • 语法： $(selector).css("propertyName", function(index, currentValue) { // index: 当前元素在匹配集合中的索引 // currentValue: 当前属性值 return newValue; });
  • 说明： 这种用法允许你根据当前的属性值动态计算新的属性值。
  • 示例： // 点击 <div> 元素时，将其宽度增加 20% $("div").click(function() { $(this).css("width", function(index, value) { return parseFloat(value) * 1.2; }); });

注意事项

  • 返回值： 当获取属性值时，css() 方法只返回第一个匹配元素的值。
  • 简写属性： 某些简写的 CSS 属性（如 “background” 或 “border”）在获取属性值时可能存在兼容性问题，建议使用完整属性名（如 “background-color”）。
  • 单位处理： 当设置数值属性时，如果没有明确指定单位（如 “px”、”em” 等），jQuery 通常会默认使用 “px”。

通过这些方法，你可以非常方便地利用 jQuery 来动态操作网页元素的样式，满足各种交互和视觉效果的需求。