jQuery CSS类

本节我们学习如何通过 jQuery 对 CSS 元素进行操作。

jQuery 有以下四种操作 CSS 的方法：

方法	描述
addClass()	向指定元素中添加一个或多个 CSS 类
removeClass()	从指定元素中删除一个或多个 CSS 类
toggleClass()	对指定元素进行添加或删除 CSS 类的切换操作
css()	设置或返回样式属性

addClass()方法

addClass() 方法用于向指定元素添加一个或多个 CSS 类，我们在添加类时，可以选择多个元素。

如果要添加多个 CSS 类到指定元素，可以使用空格分隔类名。注意该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。

示例：

例如我们实现点击按钮，改变文本的字体大小和颜色：

  
你好，欢迎来到侠课岛！
  添加CSS类

在浏览器中的演示效果：

removeClass()方法

removeClass() 方法刚好和 addClass() 方法相反，addClass() 是原先没有样式，我们需要给它添加样式。而 removeClass() 是在原有的样式基础上移除 CSS 样式。

示例：

例如将上述示例稍做修改：

  
你好，欢迎来到侠课岛！
  移除CSS类

在浏览器中的演示效果：

toggleClass()方法

toggleClass() 方法用于对指定元素进行添加或删除 CSS 类的切换操作，其实就相当于在 addClass() 和removeClass() 两个方法之间进行切换。

示例：

在添加 con 样式和移除 con 样式之间切换：

$(function(){
    $("button").click(function(){
      $("p").toggleClass("con");
    });
});

在浏览器中的演示效果：

css()方法

css() 方法为指定元素设置或返回一个或多个样式或属性。

语法如下：

css("propertyname","value");

示例：

返回指定元素的样式：

  
你好，欢迎来到侠课岛！
  获取CSS样式

在浏览器中的演示效果：

image

如果需要给指定的元素设置 CSS 属性，我们可以像下面这样做：

$(function(){
    $("button").click(function(){
      $("p").css("color", "indianred");
    });
});

在上述代码中， css() 方法内 color 为 CSS 样式属性，而 indianred 为样式属性值。

我们也可以给指定元素同时设置多个 CSS 属性，例如：

  
你好，欢迎来到侠课岛！
  设置多个CSS属性

将要设置的 CSS 属性放入一个花括号 {} 中，然后属性和属性值使用冒号 : 分隔，属性与属性之间使用逗号分隔。

在浏览器中的演示效果：

链接：https://www.9xkd.com/