html - JavaScript CSS cómo agregar y eliminar múltiples clases CSS a un elemento

¿Cómo se pueden asignar varias clases CSS a un elemento HTML a través de JavaScript sin usar ninguna biblioteca?

Respuesta #1

Aquí hay un método más simple para agregar múltiples clases a través de classList (compatible con todos los navegadores modernos, como se señala en otras respuestas aquí):

div.classList.add('foo', 'bar');   // add multiple classes

De: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Examples

Si tienes un arreglo de nombres de clase para agregar a un elemento, puedes usar el operador de propagación de ES6 para pasarlos todos a classList.add() mediante esta línea de código:

let classesToAdd = [ 'foo', 'bar', 'baz' ];
div.classList.add(...classesToAdd);

Tenga en cuenta que no todos los navegadores soportan ES6 de forma nativa todavía, así que, como con cualquier otra respuesta de ES6, probablemente querrá usar un transpilador como Babel, o simplemente quedarse con ES5 y usar una solución como la de @LayZee mencionada arriba.

Respuesta #2

Intenta hacer esto...

document.getElementById("MyElement").className += " MyClass";

Tengo esto aquí...

Respuesta #3

Esto funciona:

myElement.className = 'foo bar baz';

Respuesta #4

Hay al menos algunas formas diferentes:

var buttonTop = document.getElementById("buttonTop");

buttonTop.className = "myElement myButton myStyle";

buttonTop.className = "myElement";

buttonTop.className += " myButton myStyle";

buttonTop.classList.add("myElement");

buttonTop.classList.add("myButton", "myStyle");

buttonTop.setAttribute("class", "myElement");

buttonTop.setAttribute("class", buttonTop.getAttribute("class") + " myButton myStyle");

buttonTop.classList.remove("myElement", "myButton", "myStyle");

Respuesta #5

var el = document.getElementsByClassName('myclass')

el[0].classList.add('newclass');

el[0].classList.remove('newclass');

Para averiguar si la clase existe o no, usa:

el[0].classList.contains('newclass'); // this will return true or false 

Compatibilidad del navegador IE8+

Respuesta #6

2 grandes maneras de AGREGAR:

Pero la primera forma es más limpia, ya que para la segunda tienes que añadir un espacio al principio. Esto es para evitar que el nombre de la clase se junte con la clase anterior.

element.classList.add("d-flex", "align-items-center");
element.className += " d-flex align-items-center";

Luego, para ELIMINAR, utiliza la forma más limpia, usando classList

element.classList.remove("d-grid", "bg-danger");

Respuesta #7

Puedes agregar y eliminar múltiples clases de la misma manera con diferentes métodos integrados:

const myElem = document.getElementById('element-id');
//add multiple classes
myElem.classList.add('class-one', 'class-two', 'class-three');
//remove multiple classes
myElem.classList.remove('class-one', 'class-two', 'class-three');