Saltar al contenido

cómo agregar una clase a un elemento en el ejemplo de código javascript

Posterior a buscar en varios repositorios y sitios webs de internet al final hallamos la resolución que te mostramos a continuación.

Ejemplo 1: js add class

var element =document.getElementById('element');
element.classList.add('class-1');
element.classList.add('class-2','class-3');
element.classList.remove('class-3');

Ejemplo 2: javascript agregar clase

// getting the target elementvar myElement =document.querySelector('#myElement');// example for addding some-class to the element
myElement.classList.add('some-class');// multiple classes can be added like this
myElement.classList.add('one-class','one-more-class');// example for removing any class from the element
myElement.classList.remove('any-class');

Ejemplo 3: js add class

const div =document.createElement('div');
div.className='foo';// our starting state: 
console.log(div.outerHTML);// use the classList API to remove and add classes div.classList.remove("foo"); div.classList.add("anotherclass");//
console.log(div.outerHTML);// if visible is set remove it, otherwise add it div.classList.toggle("visible");// add/remove visible, depending on test conditional, i less than 10 div.classList.toggle("visible", i <10);console.log(div.classList.contains("foo"));// add or remove multiple classes div.classList.add("foo","bar","baz"); div.classList.remove("foo","bar","baz");// add or remove multiple classes using spread syntaxconst cls =["foo","bar"]; div.classList.add(...cls); div.classList.remove(...cls);// replace class "foo" with class "bar" div.classList.replace("foo","bar");

Ejemplo 4: javascript agregar clase a elemento

var someElement=document.getElementById("myElement");
    someElement.className+=" newclass";//add "newclass" to element (space in front is important)

Te mostramos reseñas y puntuaciones

Si entiendes que te ha sido de ayuda este artículo, sería de mucha ayuda si lo compartieras con más juniors de este modo nos ayudas a dar difusión a nuestra información.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

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