jQuery | Obtener y establecer clases de CSS

jQuery tiene varios métodos para la manipulación de CSS que se enumeran a continuación:

addClass(): Agrega una o más clases a los elementos seleccionados
removeClass(): elimina una o más clases de los elementos seleccionados
toggleClass(): alterna entre agregar o eliminar clases de elementos seleccionados
css(): establece o devuelve el atributo de estilo

Método jQuery addClass(): AddClass se usa para agregar más propiedades a cada elemento seleccionado. También se puede utilizar para cambiar la propiedad del elemento seleccionado.

Sintaxis:

$(content).addClass(target)

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        jQuery addClass() Method
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <!-- Script to use addClass method -->
    <script>
    $(document).ready(function() {
        $("button").click(function() {
            $("h1, h2, p").addClass("green");
            $("div").addClass("abs");
        });
    });
    </script>
      
    <style>
        .abs {
            font-weight: bold;
            font-size: xx-large;
        }
        .green {
            color:green;
        }
    </style>
</head>
  
<body>
    <h1>GFG</h1>
      
    <h2>GeeksForGeeks</h2>
      
    <p>This is gfg.</p>
      
    <div>This is some different text.</div><br>
      
    <button>Add classes to elements</button>
</body>
</html>                    

Producción:

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

Método jQuery removeClass(): este método se utiliza para eliminar un atributo de clase específico de diferentes elementos.

Sintaxis:

$(content).removeClass(target)

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <!-- Script to use removeClass method -->
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("h1, h2, p").removeClass("green");
            });
        });
    </script>
      
    <style>
    .important {
    font-weight: bold;
    font-size: xx-large;
    }
    .green {
    color:green;
    }
    </style>
</head>
  
<body>
    <h1 class="green">Heading 1</h1>
    <h2 class="green">GFG</h2>
      
    <p class="green">welcome to GeeksForGeeks.</p>
    <p>This is other paragraph.</p>
      
    <button>Remove class from elements</button>
</body>
  
</html>                    

Producción:

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

Método jQuery toggleClass(): este método alterna entre agregar o eliminar clases de los elementos seleccionados.

Sintaxis:

$(content).toggleClass(target)

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <!-- Script to use toggleClass() method -->
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("h1, h2, p").toggleClass("green");
            });
        });
    </script>
      
    <style>
    .green {
        color:lightgreen;
    }
    </style>
</head>
  
<body>
    <h1>Heading</h1>
    <h2>gfg</h2>
      
    <p>welcome to gfg</p>
    <p>This is other paragraph.</p>
      
    <button>Toggle class</button>
</body>
  
</html>                    

Producción:

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

Método jQuery css(): este método establece o devuelve una o más propiedades de estilo para los elementos seleccionados.
Sintaxis:

$(content).css(target)

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <!-- Script to use css() method -->
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                alert("Background color = " 
                    + $("p").css("background-color"));
            });
        });
    </script>
</head>
  
<body>
    <h2>This is a heading</h2>
      
    <p style="background-color:green;">This is a gfg.</p>
    <p style="background-color:lightgreen">This is a gfg.</p>
    <p style="background-color:blue">This is a gfg.</p>
      
    <button>background-color of p</button>
</body>
  
</html>                    

Producción:

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

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta