¿Cómo agregar clase a un elemento sin el método addClass() en jQuery?

La tarea es agregar una nueva clase al elemento sin usar el método addClass() con la ayuda de jQuery. Hay dos enfoques que se analizan a continuación:

Enfoque 1: para realizar la operación, podemos usar el método toggleClass() para alternar la clase que queremos agregar al elemento.

Ejemplo:

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to add class to an element without
        addClass() method in jQuery ?
    </title>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
  
    <style>
        #el {
            background: green;
        }
  
        .newClass {
            color: white;
        }
    </style>
</head>
  
<body style="text-align:center;">
  
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
  
    <p id="GFG_UP"></p>
  
    <p id="el">This is the element</p>
  
    <button onclick="GFG_Fun()">
        Click Here
    </button>
  
    <p id="GFG_DOWN"></p>
  
    <script>
        var el_up = document.getElementById('GFG_UP');
        var el_down = document.getElementById('GFG_DOWN');
  
        el_up.innerHTML = "Click on the button to "
                    + "perform the operation.";
                      
        function GFG_Fun() {
            $('#el').toggleClass('newClass');
            el_down.innerHTML = "Class has been added";
        }
    </script>
</body>
  
</html>

Producción:

Enfoque 2: también podemos usar el método attr() y el método prop() para agregar un nuevo atributo ‘clase’ al elemento.

Ejemplo:

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to add class to an element without
        addClass() method in jQuery ?
    </title>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
  
    <style>
        #el {
            background: green;
        }
  
        .newClass {
            color: white;
        }
    </style>
</head>
  
<body style="text-align:center;">
  
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
      
    <p id="GFG_UP"></p>
  
    <p id="el">This is the element</p>
      
    <button onclick="GFG_Fun()">
        Click Here
    </button>
      
    <p id="GFG_DOWN"></p>
  
    <script>
        var el_up = document.getElementById('GFG_UP');
        var el_down = document.getElementById('GFG_DOWN');
  
        el_up.innerHTML = "Click on the button to "
                        + "perform the operation.";
                          
        function GFG_Fun() {
            $('#el').attr('class', 'newClass');
            el_down.innerHTML = "Class has been added";
        }
    </script>
</body>
  
</html>

Producción:

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 Cancelar la respuesta