jQuery |获取和设置 CSS 类

jQuery 有多种 CSS 操作方法，如下所示：

• addClass()：给被选元素添加一个或多个类
• removeClass()：从被选元素中移除一个或多个类
• toggleClass()：在选定元素中添加或删除类之间切换
• css():设置或返回样式属性

• jQuery addClass() 方法： addClass 用于为每个选定元素添加更多属性。它还可用于更改所选元素的属性。

  句法：

  $(content).addClass(target)

  例子：

        
  
      
          jQuery addClass() Method
      
        
      
      
        
      
      
      $(document).ready(function() {
          $("button").click(function() {
              $("h1, h2, p").addClass("green");
              $("div").addClass("abs");
          });
      });
      
        
      
          .abs {
              font-weight: bold;
              font-size: xx-large;
          }
          .green {
              color:green;
          }
      
  
    
  
      GFG
        
      GeeksForGeeks
        
      This is gfg.
        
      This is some different text.
        
      Add classes to elements
  
                      

  输出：

  • 点击按钮前：
    
  • 点击按钮后：
    
• jQuery removeClass() 方法：该方法用于从不同的元素中删除特定的类属性。

  句法：

  
  
  
  

  $(content).removeClass(target)

  例子：

        
  
      
      
        
      
      
          $(document).ready(function() {
              $("button").click(function() {
                  $("h1, h2, p").removeClass("green");
              });
          });
      
        
      
      .important {
      font-weight: bold;
      font-size: xx-large;
      }
      .green {
      color:green;
      }
      
  
    
  
      Heading 1
      GFG
        
      welcome to GeeksForGeeks.
      This is other paragraph.
        
      Remove class from elements
  
    
                      

  输出：

  • 点击按钮前：
    
  • 点击按钮后：
    
• jQuery toggleClass() 方法：此方法在从选定元素中添加或删除类之间切换。

  句法：

  $(content).toggleClass(target)

  例子：

        
  
      
      
        
      
      
          $(document).ready(function() {
              $("button").click(function() {
                  $("h1, h2, p").toggleClass("green");
              });
          });
      
        
      
      .green {
          color:lightgreen;
      }
      
  
    
  
      Heading
      gfg
        
      welcome to gfg
      This is other paragraph.
        
      Toggle class
  
    
                      

  输出：

  • 点击按钮前：
    
  • 点击按钮后：
    
• jQuery css() 方法：此方法设置或返回选定元素的一个或多个样式属性。
  句法：

  $(content).css(target)

  例子：

        
  
      
      
        
      
      
          $(document).ready(function() {
              $("button").click(function() {
                  alert("Background color = " 
                      + $("p").css("background-color"));
              });
          });
      
  
    
  
      This is a heading
        
      This is a gfg.
      This is a gfg.
      This is a gfg.
        
      background-color of p
  
    
                      

  输出：

  • 点击按钮前：
    
  • 点击按钮后：