如何使用 jQuery 库修改 CSS 类？

在本文中，我们将讨论如何使用 jQuery 修改 css 类。这是 jQuery 的主要应用之一。我们通常在必须为 HTML 的特定元素添加动态样式时使用它。例如，动态更改特定类内容的颜色。

方法：我们将使用addclass()、css()等jQuery库的一些方法来修改HTML元素的CSS。让我们使用以下示例来了解此应用程序。

示例 1：在下面的示例中，我们正在使用 jQuery 修改类（“.gfg_class”）。

HTML

 

    
    JQuery Examples
    
    
    
        .gfg_class {
            color: green;
        }
    
    
        $(() => {
 
            // Updating the .gfg_class font
            $("#button1").click(function () {
                $(".gfg_class").css("font-size", "24pt");
            });
 
            // Adding border property to the span selector
            $("#button2").click(function () {
                $("span").css("border", "1px solid green");
            });
 
            // Setting background color attribute in class (#gfg_id)
            $("#button3").click(function () {
                $("#gfg_id").css("background", "green");
            });
        });
    
 

 

    
        Updating the .gfg_class font
   
    
        Adding border property to the span selector
   
    
        Setting background color attribute in class (#gfg_id)
    
 
    
      Hello this is GFG...
    
   
    
    is
    Great
    
   
    
      Hey,GFG you are great..
    
    

 

输出：通过使用文本编辑器创建一个 .html 文件来运行上述代码。

示例 2：在本示例中，您将了解“如何在部门中添加类？ “，以及它的一些属性，以便正确理解，跟随评论并与下面的输出进行比较。

HTML

 

    
    JQuery Examples
 
    
        .gfg_class_1 {
            color: green;
            font-style: italic;
        }
 
        .gfg_class_2 {
            color: red;
        }
 
        .gfg_class_3 {
            font-size: 40pt;
        }
 
        .gfg_class_4 {
            font-size: 12pt;
        }
    
 
    
    
    
        $(() => {
            // adding class in div having 'id=someSection'
            $("#button1").click(function () {
                $("#someSection > div").addClass("gfg_class_1");
            });
 
            $("#button2").click(function () {
                $("#someSection div:not('.gfg_class_1')")
                  .addClass("gfg_class_2");
            });
 
            // Div ahving class gfg_class_1 and
            // gfg_class_3 by below line
            $("#button3").click(function () {
                $("#someSection div.gfg_class_1")
                  .addClass("gfg_class_3");
            });
 
            $("#button4").click(function () {
                $("#someSection div.gfg_class_2")
                  .addClass("gfg_class_4");
            });
        });
    

 

    
      step : 1 adding class in div having 'id=someSection'
    
    
      step : 2 the class gfg_class_2 will added in the div 2 and div 4
      where the effect of class gfg_class_1 is consider secondary.
    
 
    
      step : 3 div having primary class gfg_class_1 (div 1 and div 3)
      also get gfg_class_3 by below line.
    
   
    
    step : 4 div having primary class gfg_class_2 (div 2 and div 4)
    also get gfg_class_4 by below line
   
    
    
        
            Hello,this is GFG.....
            
                How can I help you ????
            
        
        
            Okay ,so you want to code...
            
                Let's begin....
            
        
    

 

输出：通过使用文本编辑器创建一个 .html 文件来运行上述代码。

示例 3：在本示例中，您将了解“如何在表格中添加类？”以及“如何在表格的不同块、行和列中设置不同类型的样式？为了正确理解，请遵循评论并与以下输出进行比较。

HTML

 

    
    JQuery Examples
    
        .tbl {
            border: 1px solid black;
            border-collapse: collapse;
        }
    
    
    
    
        $(() => {
            // Adding class tbl in table
            $("table").addClass("tbl");
            $("table th").addClass("tbl");
            $("table td").addClass("tbl");
 
            // Setting the table head background and border
            $("#button1").click(function () {
                $("table thead").css("background", "gray");
                $("table thead").css("color", "white");
            });
 
            // Setting the head partition line in white color
            $("#button2").click(function () {
                $("table th:nth-child(2)")
                  .css("border-right", "1px solid white");
                $("table th:nth-child(1)")
                  .css("border-right", "1px solid white");
            });
 
            // Setting alternative background color (on even position)
            $("#button3").click(function () {
                $("table tbody tr").filter(":even")
                  .css("background", "lightgray");
            });
 
            // Text of column containing '2756' will get blue color
            $("#button3").click(function () {
                $("table tbody td:contains('2756')")
                  .css("color", "blue");
            });
 
            // Text of next column containing 'Sam' will get blue color
            $("#button4").click(function () {
                $("table tbody td:contains('Sam')")
                  .next().css("color", "brown");
            });
 
            // Text of all  column next to the block containing
            // '6.' will get yellow color
            $("#button5").click(function () {
                $("table tbody td:contains('6.')")
                  .nextAll().css("color", "yellow");
            });
 
            // Text of row which containing '8.' will get pink color
            $("#button6").click(function () {
                $("table tbody td:contains('8.')")
                  .nextAll().addBack().css("color", "pink");
            })
 
            // Text of row which containing '8.' will get bold
            $("#button7").click(function () {
                $("table tbody td:contains('Son')")
                  .parent().css("font-weight", "bold");
            });
 
            // Child element of column containing '2756' will get bold
            $("#button8").click(function () {
                $("table tbody td:contains('2756')")
                  .children().css("font-weight", "bold");
            });
        });
    

 

    
      setting the table head background and border
    
 
    
      setting the head partition line in white color
    
 
    
      text of column containing '2756' will get blue color
    
 
    
      text of next column containing 'Sam' will get blue color
    
 
    
      text of all column next to the block containing '6.'
      will get yellow color
    
 
    
      text of row which containing '8.' will get pink color
    
 
    
      text of row which containing '8.' will get bold
    
 
    
      child element of column containing '2756' will get bold
    
    GFG rating table
    
        
            
                
                
                
            
        
        
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
 
        
    S.No.NameGFG rating1.Jhon21522.Sam12353.Tom9604.Roy2756(leader) 5.Bob14566.Simmy3527.Son9658.Ron1745

 

输出：通过使用文本编辑器创建一个 .html 文件来运行上述代码。