¿Qué método jQuery se usa para agregar/eliminar una o más clases de elementos seleccionados?

Posted on by Rudeus Greyrat

El método utilizado para agregar o eliminar la clase de un elemento es el método toggleClass() . Cambia entre el método addClass() y el método removeClass() cuando el controlador de eventos activa el evento. En este artículo, veremos cómo funciona el método toggleClass() y cómo podemos alternar cuando hay varias clases usando jQuery.

El método addClass() agrega una clase al selector y removeClass() elimina la clase CSS del selector. El método toggleClass() cambia entre estos dos cuando el evento se activa cada vez que la clase se agrega y elimina cuando se activa el evento. Discutiremos todas estas clases paso a paso y comprenderemos su implementación a través de los ejemplos.  

1. Método addClass(): este método agrega una clase al elemento selector en jQuery.

Sintaxis:

$('selector').addClass('class_name');

Ejemplo: en este paso, agregaremos el código para el método addClass() y también agregaremos un código CSS para la clase denominada n_class .

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <title>Geeks for Geeks</title>
      
    <!-- Including jQuery  -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      letegrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous">
    </script>
      
    <style>
      button {
        color: white;
        background-color: #006600;
        width: auto;
        height: 30px;
        margin-top: 5px;
      }
      body {
        text-align: center;
      }
      p {
        font-size: 60px;
      }
      div {
        margin: 5px;
        color: #006600;
        height: auto;
        width: auto;
        position: relative;
        text-align: center;
        display: flex;
        justify-content: center;
      }
      .n_class {
        color: black;
        background-color: #006600;
        font-weight: bold;
      }
    </style>
  </head>
  
  <body>
    <button id="addClass">ADD_CLASS</button>
    <div id="GFG">
      <p>Geeks For Geeks</p>
    </div>
  
    <script>
      $(document).ready(function () {
        $("#addClass").click(function () {
          $("div").addClass("n_class");
        });
      });
    </script>
  </body>
</html>

Producción:

2. Método removeClass(): este método elimina una clase en el elemento selector en jQuery.

Sintaxis:

$('selector').removeClass('class_name');

Ejemplo: en este paso, agregaremos el código para el método removeClass() que ayudará a eliminar las propiedades CSS de una clase llamada n_class que hemos aplicado en el ejemplo 1.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <title>Geeks for Geeks</title>
      
    <!-- Including jQuery  -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      letegrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous">
    </script>
      
    <style>
      button {
        color: white;
        background-color: #006600;
        width: auto;
        height: 30px;
        margin-top: 5px;
      }
      body {
        text-align: center;
      }
      p {
        font-size: 60px;
      }
      div {
        margin: 5px;
        color: #006600;
        height: auto;
        width: auto;
        position: relative;
        text-align: center;
        display: flex;
        justify-content: center;
      }
      .n_class {
        color: black;
        background-color: #006600;
        font-weight: bold;
      }
    </style>
  </head>
  
  <body>
    <button id="addClass">REMOVE_CLASS</button>
  
    <div id="GFG" class="n_class">
      <p>Geeks For Geeks</p>
    </div>
  
    <script>
      $(document).ready(function () {
        $("#addClass").click(function () {
          $("div").removeClass("n_class");
        });
      });
    </script>
  </body>
</html>

Producción:

3. Método toggleClass(): alterna entre los métodos addClass() y removeClass().

Sintaxis: 

  1. Para una sola clase.
$('selector').toggleClass('class_name');

       2. Para clases múltiples.

$('selector').toggleClass('class_name1 class_name2');

Para clase única: por ejemplo, la alternancia entre agregar o eliminar la clase única n_class haciendo clic en el botón y se activa el evento de clic.

.n_class {
  color: black;
  background-color: #006600;
  font-weight: bold;
}

Ejemplo 3:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <title>Geeks for Geeks</title>
      
    <!-- Including jQuery  -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      letegrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous">
    </script>
      
    <style>
      button {
        color: white;
        background-color: #006600;
        width: auto;
        height: 30px;
        margin-top: 5px;
      }
  
      body {
        text-align: center;
      }
  
      p {
        font-size: 60px;
      }
  
      div {
        margin: 5px;
        color: #006600;
        height: auto;
        width: auto;
        position: relative;
        text-align: center;
        display: flex;
        justify-content: center;
      }
  
      .n_class {
        color: black;
        background-color: #006600;
        font-weight: bold;
      }
    </style>
  </head>
  
  <body>
    <button id="toggleClass">TOGGLE_CLASS</button>
  
    <div id="GFG">
      <p>Geeks For Geeks</p>
    </div>
  
    <script>
      $(document).ready(function () {
        $("#toggleClass").click(function () {
          $("div").toggleClass("n_class");
        });
      });
    </script>
  </body>
</html>

Producción:

Para clases múltiples: por ejemplo, alternamos entre varias clases, aquí, las clases n_class , p_class se agregan o eliminan cuando se hace clic en el botón y se activa el evento de clic.

1ra clase:

.n_class {
  color: black;
  background-color: #006600;
  font-weight: bold;
}

2da clase:

.p_class {
  font-family: "Courier New", Courier, monospace;
  border: 5px solid black;
}

Ejemplo 4:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <title>Geeks for Geeks</title>
      
    <!-- Including jQuery  -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      letegrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous">
    </script>
      
    <style>
      button {
        color: white;
        background-color: #006600;
        width: auto;
        height: 30px;
        margin-top: 5px;
      }
      body {
        text-align: center;
      }
      p {
        font-size: 60px;
      }
      div {
        margin: 5px;
        color: #006600;
        height: auto;
        width: auto;
        position: relative;
        text-align: center;
        display: flex;
        justify-content: center;
      }
      .n_class {
        color: black;
        background-color: #006600;
        font-weight: bold;
      }
      .p_class {
        font-family: "Courier New", Courier, monospace;
        border: 5px solid black;
      }
    </style>
  </head>
  
  <body>
    <button id="toggleClass">TOGGLE_CLASS</button>
  
    <div id="GFG">
      <p>Geeks For Geeks</p>
    </div>
  
    <script>
      $(document).ready(function () {
        $("#toggleClass").click(function () {
          $("div").toggleClass("n_class p_class");
        });
      });
    </script>
  </body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por lokeshpotta20 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 *