¿Cómo agregar y eliminar varias clases en jQuery?

Dado un elemento HTML y la tarea es agregar y eliminar múltiples clases usando JQuery.

Acercarse:

  • Primero seleccione el elemento al que se agregarán varias clases.
  • Luego use el método addClass() para agregar varias clases al elemento y el método removeClass() para eliminar varias clases.

Ejemplo 1: este ejemplo agrega dos clases color y fontWeight al elemento seleccionado usando el método addClass() .

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            How to Add and Remove multiple classes
        </title>
          
        <script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
          
        <style>
            .color {
                color: red;
            }
            .fontWeight {
                font-weight: bold;
            }
        </style>
    </head> 
      
    <body style = "text-align:center;"> 
          
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" style = "font-size: 19px;">
        </p>
          
        <button onClick = "GFG_Fun()">
            click here
        </button>
          
        <p id = "GFG_DOWN" style = 
            "color: green; font-size: 24px; font-weight: bold;">
        </p>
          
        <script>
            $('#GFG_UP').text("Click on button to add multiple"
                + " classes to this element");
              
            function GFG_Fun() {
                $("#GFG_UP").addClass("color fontWeight");
                $('#GFG_DOWN').text("color and fontWeight,"
                        + " Both classes added");
            }
        </script> 
    </body> 
</html>                    

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Ejemplo 2: Este ejemplo elimina dos clases color y fontWeight del elemento seleccionado usando el método removeClass() .

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            How to Add and Remove multiple classes
        </title>
          
        <script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
          
        <style>
            .color {
                color: red;
            }
            .fontWeight {
                font-weight: bold;
            }
        </style>
    </head> 
      
    <body style = "text-align:center;"> 
          
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" class = "color fontWeight"
                style = "font-size: 19px;">
        </p>
          
        <button onClick = "GFG_Fun()">
            click here
        </button>
          
        <p id = "GFG_DOWN" style =
            "color: green; font-size: 24px; font-weight: bold;">
        </p>
          
        <script>
            $('#GFG_UP').text("Click on button to remove"
                + " multiple classes to this element");
              
            function GFG_Fun() {
                $("#GFG_UP").removeClass("color fontWeight");
                $('#GFG_DOWN').text("color and fontWeight,"
                        + " Both classes removed");
            }
        </script> 
    </body> 
</html>                    

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *