¿Cómo agregar una clase al elemento DOM en JavaScript?

DOM (Document Object Model) es una forma de manipular el documento (documento HTML). Este artículo tratará sobre cómo acceder y establecer nombres de clase para los elementos DOM. En DOM, todos los elementos HTML se definen como objetos. Usaremos Javascript contra CSS para manipularlos.

Las siguientes son las propiedades de Javascript que usaremos para agregar una clase al elemento DOM:

Propiedad classList: Devuelve el nombre de la clase como un objeto DOMTokenList. Tiene un método llamado «agregar» que se usa para agregar el nombre de la clase a los elementos.

Sintaxis:

element.classList.add("className")

Ejemplo:

html

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .geek {
            background-color: green;
            font-size: 50px;
        }
    </style>
</head>
  
<body>
  
    <button onclick="myClass()">Try it</button>
  
    <div id="gfg">Geeks for Geeks</div>
  
    <script>
        function myClass() {
            var elem = document.getElementById("gfg");
            
            // Adding class to div element
            elem.classList.add("geek"); 
        }
    </script>
  
</body>
  
</html>

Salida:
Antes de hacer clic en el botón:

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

Propiedad className: esta propiedad devuelve el nombre de clase del elemento. Si el elemento ya tiene una clase, simplemente le agregará otra o le agregará nuestra nueva clase.

Sintaxis:

HTMLElementObject.className

Ejemplo:

html

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .geekClass {
            background-color: green;
            text-align: center;
            font-size: 50px;
        }
    </style>
</head>
  
<body>
  
    <div id="gfg">
        Geeks For Geeks
    </div>
  
    <button onclick="myClassName()">Add Class</button>
  
    <script>
        function myClassName() {
            var element = document.getElementById("gfg");
              
            // Adding the class geekClass to element
            // with id gfg space is given in className
            // (" geekClass") as if there is already
            // a class attached to an element than our
            // new class won't overwrite and will append
            // one more class to the element 
            element.className += " geekClass"; 
        }
    </script>
  
</body>
  
</html>

Salida:
Antes de hacer clic en el botón:

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

Navegadores compatibles: los navegadores compatibles con la propiedad classList se enumeran a continuación:

cromo 8+
Ópera 11.5+
Safari 5.1+
Borde 10+
MozillaFirefox 3.6+

Publicación traducida automáticamente

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

html

html

Deja una respuesta Cancelar la respuesta