Cómo agregar o eliminar un nombre de clase de elemento usando JavaScript

Cómo agregar o eliminar un nombre de clase de elemento usando JavaScript

En este tutorial, vamos a aprender cómo agregar o quitar un nombre de clase a un elemento html usando JavaScript.

Considere que tenemos un div elemento con un idY dos button elementos.

<div id="box">
  This is div
</div>

<button id="add-btn">Add class</button>
<button id="remove-btn">Remove class</button>

Ahora necesitamos agregar una clase al div elemento haciendo clic en un Add class botón y eliminar una clase usando el botón Remove class botón.

Índice
  1. Agregando clase
  2. Borrando una clase
  3. Demostración de Codepen

Agregando clase

En JavaScript tenemos un classList propiedad que contiene un add() método utilizado para agregar una clase a un elemento.

Ejemplo:

const div = document.getElementById('box');
const addBtn = document.getElementById('add-btn');

addBtn.addEventListener('click',()=>{
    div.classList.add('shadow');})

Ahora bien, si hacemos clic en un Add class botón el shadow la clase se agrega a la div elemento.

Borrando una clase

Para eliminar una clase, necesitamos usar el remove() método en classList propiedad.

const div = document.getElementById('box');
const removeBtn = document.getElementById('remove-btn');

removeBtn.addEventListener('click',()=>{
    div.classList.remove('shadow');})

Ahora bien, si hacemos clic en un Remove class botón el shadow la clase se elimina del elemento div.

Demostración de Codepen

Si quieres conocer otros artículos parecidos a Cómo agregar o eliminar un nombre de clase de elemento usando JavaScript puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas