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

Question

¿Cómo se pueden asignar múltiples clases de CSS a un elemento html a través de javascript sin usar ninguna biblioteca?

Answer 1

Intente hacer esto ...

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

conseguimos esto here ...

Answer 2

garantizados para trabajar en nuevos navegadores. el antiguo método className no puede, ya que está obsoleto.

<element class="oneclass" /> 

element.setAttribute('class', element.getAttribute('class') + ' another'); 
alert(element.getAttribute('class')); // oneclass another 

Answer 3

Esto funciona:

myElement.className = 'foo bar baz'; 

Answer 4

Tal vez:

document.getElementById("myEle").className = "class1 class2"; 

No se ha probado, pero debería funcionar.

Answer 5

Prueba esto:

function addClass(element, value) { 
    if(!element.className) { 
    element.className = value; 
    } else { 
    newClassName = element.className; 
    newClassName+= " "; 
    newClassName+= value; 
    element.className = newClassName; 
    } 
} 

Una lógica similar se podría utilizar para hacer una función removeClass.

Answer 6

sólo tiene que utilizar este

element.getAttributeNode("class").value += " antherClass"; 

tener cuidado acerca de espacio para evitar mezclar la clase de edad con nueva clase

Answer 7

En los navegadores modernos, el classList API es supported.

Esto permite una (vainilla) de JavaScript así:

var addClasses; 

addClasses = function (selector, classArray) { 
    'use strict'; 

    var className, element, elements, i, j, lengthI, lengthJ; 

    elements = document.querySelectorAll(selector); 

    // Loop through the elements 
    for (i = 0, lengthI = elements.length; i < lengthI; i += 1) { 
     element = elements[i]; 

     // Loop through the array of classes to add one class at a time 
     for (j = 0, lengthJ = classArray.length; j < lengthJ; j += 1) { 
      className = classArray[j]; 

      element.classList.add(className); 
     } 
    } 
}; 

navegadores modernos (no IE) soportan el paso de varios argumentos para la función classList::add, lo que eliminaría la necesidad de que el bucle anidado, la simplificación de la funcionar un poco:

var addClasses; 

addClasses = function (selector, classArray) { 
    'use strict'; 

    var classList, className, element, elements, i, j, lengthI, lengthJ; 

    elements = document.querySelectorAll(selector); 

    // Loop through the elements 
    for (i = 0, lengthI = elements.length; i < lengthI; i += 1) { 
     element = elements[i]; 
     classList = element.classList; 

     // Pass the array of classes as multiple arguments to classList::add 
     classList.add.apply(classList, classArray); 
    } 
}; 

Uso

addClasses('.button', ['large', 'primary']); 

versión funcional

var addClassesToElement, addClassesToSelection; 

addClassesToElement = function (element, classArray) { 
    'use strict'; 

    classArray.forEach(function (className) { 
     element.classList.add(className); 
    }); 
}; 

addClassesToSelection = function (selector, classArray) { 
    'use strict'; 

    // Use Array::forEach on NodeList to iterate over results. 
    // Okay, since we’re not trying to modify the NodeList. 
    Array.prototype.forEach.call(document.querySelectorAll(selector), function (element) { 
     addClassesToElement(element, classArray) 
    }); 
}; 

// Usage 
addClassesToSelection('.button', ['button', 'button--primary', 'button--large']) 

La función classList::add evitará que varias instancias de la misma clase CSS a diferencia de algunas de las respuestas anteriores.

Recursos sobre la API classList:

• Can I use
• MDN
• David Walsh
• HTML5 Doctor

Answer 8

var el = document.getElementsByClassName('myclass') 

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

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

Para saber si la clase exis ts o no, utilizan: el apoyo

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

navegador IE8 +

Answer 9

Aquí es un método más simple para agregar varias clases a través de classList (soportado por todos los navegadores modernos, como se ha señalado en otras respuestas aquí):

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

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

Si usted tiene un arr ay de los nombres de las clases para añadir a un elemento, se puede utilizar el ES6 spread operator pasar a todos en classList.add() a través de este de una sola línea:

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

Tenga en cuenta que no todos los navegadores soportan ES6 forma nativa todavía, así como con cualquier otro ES6 responda que probablemente quiera usar un transpiler como Babel, o simplemente seguir con ES5 y usar una solución como la de @ZayZee.

Answer 10

Tal vez esto le ayudará a aprender:

//<![CDATA[ 
 
/* external.js */ 
 
var doc, bod, htm, C, E, addClassName, removeClassName; // for use onload elsewhere 
 
addEventListener('load', function(){ 
 
doc = document; bod = doc.body; htm = doc.documentElement; 
 
C = function(tag){ 
 
    return doc.createElement(tag); 
 
} 
 
E = function(id){ 
 
    return doc.getElementById(id); 
 
} 
 
addClassName = function(element, className){ 
 
    var rx = new RegExp('^(.+\s)*'+className+'(\s.+)*$'); 
 
    if(!element.className.match(rx)){ 
 
    element.className += ' '+className; 
 
    } 
 
    return element.className; 
 
} 
 
removeClassName = function(element, className){ 
 
    element.className = element.className.replace(new RegExp('\s?'+className), ''); 
 
    return element.className; 
 
} 
 
var out = E('output'), mn = doc.getElementsByClassName('main')[0]; 
 
out.innerHTML = addClassName(mn, 'wow'); 
 
out.innerHTML = addClassName(mn, 'cool'); 
 
out.innerHTML = addClassName(mn, 'it works'); 
 
out.innerHTML = removeClassName(mn, 'wow'); 
 
out.innerHTML = removeClassName(mn, 'main'); 
 

 
}); // close load 
 
//]]>

/* external.css */ 
 
html,body{ 
 
    padding:0; margin:0; 
 
} 
 
.main{ 
 
    width:980px; margin:0 auto; 
 
}

<!DOCTYPE html> 
 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> 
 
    <head> 
 
    <meta http-equiv='content-type' content='text/html;charset=utf-8' /> 
 
    <link type='text/css' rel='stylesheet' href='external.css' /> 
 
    <script type='text/javascript' src='external.js'></script> 
 
    </head> 
 
<body> 
 
    <div class='main'> 
 
    <div id='output'></div> 
 
    </div> 
 
</body> 
 
</html>