JavaScript CSS comment ajouter et supprimer plusieurs classes CSS à un élément
comment attribuer plusieurs classes css à un élément html par javascript sans utiliser de bibliothèques?
11 réponses
Voici une méthode plus simple pour ajouter plusieurs classes via classList
(supportée par tous les navigateurs modernes, comme noté 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 tableau de noms de classe à ajouter à un élément, vous pouvez utiliser L'opérateur ES6 spread pour les passer tous dans classList.add()
via cette doublure:
let classesToAdd = [ 'foo', 'bar', 'baz' ];
div.classList.add(...classesToAdd);
notez que tous les navigateurs ne prennent pas encore en charge ES6 nativement, donc comme pour toute autre réponse ES6 , vous voudrez probablement utiliser un transpireur comme Babel , ou tout simplement coller avec ES5 et utiliser une solution comme @layzee ci-dessus.
var el = document.getElementsByClassName('myclass')
el[0].classList.add('newclass');
el[0].classList.remove('newclass');
pour déterminer si la classe existe ou non, utiliser:
el[0].classList.contains('newclass'); // this will return true or false
prise en charge du Navigateur IE8+
garanti pour travailler sur les nouveaux navigateurs. l'ancienne façon de nom de classe ne peut pas, puisqu'elle est dépréciée.
<element class="oneclass" />
element.setAttribute('class', element.getAttribute('class') + ' another');
alert(element.getAttribute('class')); // oneclass another
peut-être:
document.getElementById("myEle").className = "class1 class2";
non testé, mais ça devrait marcher.
il suffit d'utiliser ce
element.getAttributeNode("class").value += " antherClass";
prendre soin de L'espace pour éviter de mélanger ancienne classe avec nouvelle classe
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 créer une fonction removeClass.
dans les navigateurs modernes, le classList API est pris en charge .
cela permet une fonction JavaScript (vanille) 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 (pas IE) le soutien passant de multiples arguments à la fonction classList::add
, qui supprimerait la nécessité de la boucle imbriquée, en simplifiant la fonction 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 les instances multiples de la même classe CSS par opposition à certaines des réponses précédentes.
ressources de l'API classList:
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>
puisque je ne pouvais trouver cette réponse nulle part:
ES6 façon (les Navigateurs Modernes)
el.classList.add("foo", "bar", "baz");