jQuery CSS类 - 蝴蝶教程

jQuery 获取和设置CSS类

使用jQuery，可以轻松地操纵元素的样式。

jQuery有几种CSS操作方法。我们将看看以下方法：

addClass() 向所选元素添加一个或多个类
removeClass() 从所选元素中删除一个或多个类
toggleClass() 在所选元素中添加/删除类之间切换
css() 设置或返回样式属性

示例样式表

   
    .important {
      font-weight: bold;
      font-size: 18px;
    }
    .blue {
      color: blue;
    }

jQuery addClass()方法

以下示例显示如何将类属性添加到不同的元素。当然，添加类时可以选择多个元素：

   
      <head>
          <script type="text/javascript" src="jquery.js"></script>
          <script type="text/javascript">
              $("button").click(function(){
                $("h1, h2, p").addClass("blue");
                $("div").addClass("important");
              });
          </script>
      </head>

尝试一下

您还可以在addClass()方法中指定多个类：

   
      <head>
          <script type="text/javascript" src="jquery.js"></script>
          <script type="text/javascript">
              $("button").click(function(){
                $("#div1").addClass("important blue");
              });
          </script>
      </head>

尝试一下

jQuery removeClass()方法

以下示例显示如何从不同元素中删除特定的类属性：

   
      <head>
          <script type="text/javascript" src="jquery.js"></script>
          <script type="text/javascript">
              $("button").click(function(){
                $("h1, h2, p").removeClass("blue");
              });
          </script>
      </head>

尝试一下

jQuery toggleClass()方法

以下示例将说明如何使用jQuery toggleClass()方法。此方法在从所选元素添加/删除类之间切换：

   
      <head>
          <script type="text/javascript" src="jquery.js"></script>
          <script type="text/javascript">
              $("button").click(function(){
                 $("h1, h2, p").toggleClass("blue");
              });
          </script>
      </head>

尝试一下

jQuery css()方法

jQuery css()方法将在下一章中解释。

有关所有jQuery HTML方法的完整概述，请转到我们的jQuery HTML/CSS手册