JavaScript CSS comment ajouter et supprimer plusieurs classes CSS à un élément

Question

Comment affecter plusieurs classes CSS à un élément html via javascript sans utiliser de bibliothèque?

Answer 1

Essayez de faire cela ...

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

a obtenu ce here ...

Answer 2

garanti pour fonctionner sur les nouveaux navigateurs. l'ancien nom de classe ne peut pas, car il est obsolète.

<element class="oneclass" /> 

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

Answer 3

Cela fonctionne:

myElement.className = 'foo bar baz'; 

Answer 4

Peut-être:

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

Non testé, mais devrait fonctionner.

Answer 5

Essayez ceci:

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

Une logique similaire pourrait être utilisée pour faire une fonction removeClass.

Answer 6

il suffit d'utiliser cette

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

prendre soin de l'espace pour ne pas perturber ancienne classe avec une nouvelle classe

Answer 7

Dans les navigateurs modernes, le classList API est supported.

Cela permet une (vanille) fonction JavaScript comme ceci:

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); 
     } 
    } 
}; 

navigateurs modernes prennent en charge (pas IE) qui passe plusieurs arguments à la fonction classList::add, qui supprimerait la nécessité de la boucle imbriquée, ce qui simplifie la fonctionner un peu:

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); 
    } 
}; 

Utilisation

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

version fonctionnelle

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 fonction classList::add empêchera plusieurs instances de la même classe CSS par opposition à quelques-unes des réponses précédentes.

Ressources sur l'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'); 

pour savoir si la classe exis ts ou non, utilisez:

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

support du navigateur IE8 +

Answer 9

Voici une méthode plus simple d'ajouter plusieurs classes via classList (pris en charge par tous les navigateurs modernes, comme il est indiqué dans d'autres réponses ici):

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

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

Si vous avez un arr ay des noms de classe à ajouter à un élément, vous pouvez utiliser le ES6 spread operator pour les passer tous en classList.add() via ce one-liner:

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

Notez que prennent pas en charge tous les navigateurs ES6 nativement encore, afin de tout autre ES6 Répondez, vous voudrez probablement utiliser un transpileur comme Babel, ou tout simplement coller avec ES5 et utiliser une solution comme @ LayZee ci-dessus.

Answer 10

Peut-être que cela vous aidera à apprendre:

//<![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>