jQuery 中 css() 方法有什么用？

1. CSS() 方法概述

在 jQuery 中，CSS() 方法用于设置或返回 html 元素的一个或多个样式属性。它是中最重要且最常用的方法之一，可实现对网页样式的灵活控制。

$(selector).css(property,value)

其中，selector 是要操作的元素或元素集合，property 是要设置或返回的样式属性，value 是要设置的样式的值。需要注意的是，CSS 属性名在 jQuery 中应该使用驼峰式命名，例如“font-size”应该写成“fontSize”。

2. 设置元素样式

2.1 设置单一样式

使用 css() 方法可以直接设置某个元素的单一样式属性，如下所示：

$(document).ready(function(){
  $("button").click(function(){
    $("p").css("color","red");
  });
});

这段代码实现了当点击按钮时让 id 为 p 的元素的字体颜色变红。其中，color 是要设置的属性，red 是属性值。同理，我们也可以设置元素的其他属性：

$(document).ready(function(){
  $("button").click(function(){
    $("h1").css("font-size","50px");
    $("div").css("background-color","lightblue");
  });
});

2.2 设置多个样式

如果需要设置多个样式，我们可以把它们组织成一个 JSON 对象并传入 css() 方法内，如下所示：

$(document).ready(function(){
  $("button").click(function(){
    $("p").css({
      "color": "red",
      "font-size": "30px",
      "background-color": "yellow"
    });
  });
});

这段代码实现了当点击按钮时同时改变 id 为 p 的元素的字体颜色、字号和背景颜色。

3. 获取元素样式

除了设置元素的样式，我们还可以使用 css() 方法来获取元素的样式。使用这个方法获取样式时，你只需要传入属性名即可，这会返回该元素当前的属性值，如下所示：

$(document).ready(function(){
  $("button").click(function(){
    alert($("h1").css("color"));
  });
});

这段代码会在点击按钮时弹出 id 为 h1 的元素的当前字体颜色值。

4. 总结

CSS() 方法是 jQuery 中用于设置或获取 html 元素样式的重要方法。使用这个方法可以快速地改变元素样式，并使网页实现更灵活的效果。除了改变样式，这个方法还可以用于获取元素的单一样式。值得注意的是，在使用 css() 方法时需要注意属性名的写法。