如何使用 jQuery 在 HTML 中操作 CSS 类？

类的常见操作包括从 HTML 标记中添加类或删除类等操作。

以下类用于操作。

• 添加类（）
• 删除类（）
• 切换类（）

1. addClass() 方法： addClass()函数的目的是为指定的元素或标签添加一个或多个类。

句法：

$('selector expression').addClass('class name');

例子：

HTML

    
    
    
    
    
     
    
        p{
            border:1px solid black;
            text-align: center;
            padding:2rem;
            margin: 2rem;
        }
        .bgred{
            background-color: red;
        }
        button{
          
            margin:0 10rem;
        }
    
      


    
        GeeksforGeeks
        Hi this is paragraph
  
        Change background
    
    
        $('button').click(()=>{
            $('p').addClass('bgred')
        })
    

输出：

2. removeClass() 方法：我们使用removeClass()函数从指定的元素或标签中删除一个或多个或所有类。

句法：

$('selector expression').removeClass('class name');

例子：

HTML

    
    
    
    
    
    
        p{
            border:1px solid black;
            text-align: center;
            padding:2rem;
            margin: 2rem;
        }
        .bgred{
            background-color: red;
        }
        button{
          
            margin:0 10rem;
        }
    
      


    
        GeeksforGeeks
        Hi this is paragraph
  
        Change background
    
    
        $('button').click(()=>{
            $('p').removeClass('bgred');
        })
    

输出：

3、toggleClass() 方法：我们使用toggleClass()函数同时向指定元素或标签添加或删除类。

句法：

$('selector expression').addClass('class name');

例子：

HTML

    
    
    
    
    
      
    
        p{
            border:1px solid black;
            text-align: center;
            padding:2rem;
            margin: 2rem;
        }
        .bgred{
            background-color: red;
        }
        button{
          
            margin:0 10rem;
        }
    
      


    
        GeeksforGeeks
        Hi, this is paragraph
  
        Change background
    
      
    
        $('button').click(()=>{
            $('p').toggleClass('bgred');
        })
    

输出：