Añadir y quitar clases con JavaScript

Añadir y quitar clases con JavaScript

En el siguiente tutorial aprenderemos cómo Añadir y quitar clases con JavaScript

Añadir una o más clases

Para añadir clases a un elemento tenemos que seleccionar el listado de clases y utilizar el método add

Ejemplo

<!--Elemento html-->
<div id="contenido"></div>
<script>
	// Vamos a añadir la clase principal al elemento con id=contenido
	document.getElementById('contenido').classList.add('principal');
        // Ahora vamos a añadir 2 clases más
        document.getElementById('contenido').classList.add('primero', 'main');
</script>

Quitar una o más clases

Para quitar clases a un elemento tenemos que seleccionar el listado de clases del elemento y utilizar el método remove

Ejemplo

<!--Elemento html-->
<div id="contenido" class="principal primero main"></div>
<script>
	// Vamos a quitar la clase principal al elemento con id=contenido
	document.getElementById('contenido').classList.remove('principal');
        // Ahora vamos a quitar otras 2 clases
        document.getElementById('contenido').classList.remove('primero', 'main');
</script>

Añadir o quitar clases

Podemos utilizar el método toggle para añadir una clase o quitarla dependiendo si el elemento ya tiene esa clase o no, por lo cual, si el elemento tiene la clase indicada se la quita y si no la tiene se la añade

Ejemplo

<!--Elemento html-->
<div id="contenido" class="principal primero main"></div>
<script>
	// Vamos quitar la clase principal porque ya la tiene
	document.getElementById('contenido').classList.toggle('principal');
        // En este caso añadirá la clase principal porque ya no la tiene
        document.getElementById('contenido').classList.toggle('principal');
</script>

Añadir o sustituir clases

En JavaScript también podemos añadir o sustituir clases a un elemento de la siguiente forma

• Reemplazar las clases existentes por otras

<!--Elemento html-->
<div id="contenido" class="principal"></div>
<div id="conclusion" class="resumen main-content"></div>
<script>
    let elemento = document.getElementById("contenido");
    // Cambiamos la clase principal por cabecera
	elemento.className = "cabecera";
    let elemento2 = document.getElementById("conclusion");
    // Cambiamos todas las clases por otras
    elemento2.className = "text-resume main-text";
</script>

• Añadir clases

<!--Elemento html-->
<div id="contenido" class="principal"></div>
<div id="conclusion" class="resumen main-content"></div>
<script>
    let elemento = document.getElementById("contenido");
    // Añadimos la clase cabecera
    elemento.className += " cabecera";
</script>

Más tutoriales de JavaScript