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手册