Antworten:
Verwenden Sie element.classList.add , um eine Klasse hinzuzufügen:
element.classList.add("my-class");Und element.classList.remove , um eine Klasse zu entfernen:
element.classList.remove("my-class");Fügen Sie dem Leerzeichen ein Leerzeichen und den Namen Ihrer neuen Klasse hinzu className Eigenschaft des Elements . Setzen Sie zuerst ein idauf das Element, damit Sie leicht eine Referenz erhalten können.
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>Dann
var d = document.getElementById("div1");
d.className += " otherclass";Beachten Sie das Leerzeichen vor otherclass. Es ist wichtig, den Speicherplatz einzuschließen, da sonst vorhandene Klassen, die davor stehen, in die Klassenliste aufgenommen werden.
Siehe auch element.className auf MDN .
Der einfachste Weg, dies ohne Framework zu tun, ist die Verwendung der Methode element.classList.add .
var element = document.getElementById("div1");
element.classList.add("otherclass");Bearbeiten: Und wenn Sie Klasse aus einem Element entfernen möchten -
element.classList.remove("otherclass");Ich bevorzuge es, keinen leeren Raum hinzuzufügen und die Eingabe selbst zu duplizieren (was bei Verwendung des document.classNameAnsatzes erforderlich ist ). Es gibt einige Browser-Einschränkungen , die Sie jedoch mithilfe von Polyfills umgehen können .
Finden Sie Ihr Zielelement "d", wie Sie möchten, und dann:
d.className += ' additionalClass'; //note the spaceSie können dies auf cleverere Weise einwickeln, um das Vorhandensein zu überprüfen und den Platzbedarf zu überprüfen.
splitden Klassennamen auf Leerzeichen, zu entfernen, entfernen Sie den gewünschten Namen aus dem resultierenden Array und dann joindas Array erneut ... oder verwenden Sie element.classList.remove.
Kreuzkompatibel
Im folgenden Beispiel fügen wir classnamedem <body>Element ein hinzu. Dies ist IE-8-kompatibel.
var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';Dies ist eine Abkürzung für Folgendes.
var a = document.body;
if (a.classList) {
a.classList.add('wait');
} else {
a.className += ' wait';
}Performance
Wenn Sie sich mehr um die Leistung als um die Kompatibilität kümmern, können Sie diese auf 4% schneller verkürzen.
var z = document.body;
document.body.classList.add('wait');Bequemlichkeit
Alternativ können Sie jQuery verwenden, die resultierende Leistung ist jedoch erheblich langsamer. 94% langsamer laut jsPerf
$('body').addClass('wait');Performance
Die selektive Verwendung von jQuery ist die beste Methode zum Entfernen einer Klasse, wenn Sie sich mit der Leistung befassen
var a = document.body, c = ' classname';
$(a).removeClass(c);Ohne jQuery ist es 32% langsamer
var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")a.classList ? ...) einen Geschwindigkeitsunterschied zur normalen Version ( ) haben if (a.classList) { ....?
classList.remove(). Warum hast du es nicht benutzt? Es ist viel schneller als jQuery jsperf.com/remove-class-vanilla-vs-jquery
classListfür alles verwendet, außer um Klassen zu entfernen, deshalb frage ich es.
Ein weiterer Ansatz zum Hinzufügen der Klasse zum Element mithilfe von reinem JavaScript
Zum Hinzufügen einer Klasse:
document.getElementById("div1").classList.add("classToBeAdded");Zum Entfernen der Klasse:
document.getElementById("div1").classList.remove("classToBeRemoved");Wenn die Arbeit, die ich mache, die Verwendung einer Bibliothek nicht rechtfertigt, verwende ich diese beiden Funktionen:
function addClass( classname, element ) {
var cn = element.className;
//test for existance
if( cn.indexOf( classname ) != -1 ) {
return;
}
//add a space if the element already has class
if( cn != '' ) {
classname = ' '+classname;
}
element.className = cn+classname;
}
function removeClass( classname, element ) {
var cn = element.className;
var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
cn = cn.replace( rxp, '' );
element.className = cn;
}if( cn.indexOf( classname ) != -1 ) { return; } Beachten Sie, dass dies fehlschlägt, wenn Sie die Klasse "btn" hinzufügen, wobei die Klasse "btn-info" bereits vorhanden ist.
element.className.split(" ");, um das hier gemeldete Problem @AlexandreDieulot zu verhindern.
Angenommen, Sie tun mehr als nur das Hinzufügen dieser einen Klasse (z. B. haben Sie asynchrone Anforderungen usw.), würde ich eine Bibliothek wie Prototype oder jQuery empfehlen .
Dies macht fast alles, was Sie tun müssen (einschließlich dieser), sehr einfach.
Nehmen wir also an, Sie haben jetzt jQuery auf Ihrer Seite. Sie können Code wie diesen verwenden, um einem Element einen Klassennamen hinzuzufügen (in diesem Fall beim Laden):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );Überprüfen Sie den jQuery API-Browser auf andere Dinge.
Mit der Methode classList.add OR classList.remove können Sie eine Klasse zu einem Element hinzufügen oder daraus entfernen.
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")Der obige Code fügt nameElem eine Klasse "anyclass" hinzu (und ersetzt sie NICHT). Ebenso können Sie die classList.remove () -Methode verwenden, um eine Klasse zu entfernen.
nameElem.classList.remove("anyclss")Um einem Element eine Klasse hinzuzufügen, ohne vorhandene Werte zu entfernen / zu beeinflussen, fügen Sie ein Leerzeichen und den neuen Klassennamen wie folgt hinzu:
document.getElementById("MyElement").className += " MyClass";Um alle vorhandenen Klassen durch eine oder mehrere neue Klassen zu ersetzen, legen Sie das Attribut className fest:
document.getElementById("MyElement").className = "MyClass";(Sie können eine durch Leerzeichen getrennte Liste verwenden, um mehrere Klassen anzuwenden.)
Wenn Sie jQuery nicht verwenden und ältere Browser unterstützen möchten:
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}Ich weiß, dass IE9 offiziell heruntergefahren wird und wir es mit element.classListden oben genannten erreichen können, aber ich habe nur versucht zu lernen, wie es ohne funktioniertclassList dass ich es mithilfe vieler Antworten oben lernen könnte.
Der folgende Code erweitert viele der obigen Antworten und verbessert sie, indem das Hinzufügen doppelter Klassen vermieden wird.
function addClass(element,className){
var classArray = className.split(' ');
classArray.forEach(function (className) {
if(!hasClass(element,className)){
element.className += " "+className;
}
});
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');Ich denke auch, dass der schnellste Weg darin besteht, Element.prototype.classList wie in es5 zu verwenden: document.querySelector(".my.super-class").classList.add('new-class')
aber in ie8 gibt es kein Element.prototype.classList, trotzdem können Sie es mit diesem Snippet polyfillieren (es kann frei bearbeitet und verbessert werden ):
if(Element.prototype.classList === void 0){
function DOMTokenList(classes, self){
typeof classes == "string" && (classes = classes.split(' '))
while(this.length){
Array.prototype.pop.apply(this);
}
Array.prototype.push.apply(this, classes);
this.__self__ = this.__self__ || self
}
DOMTokenList.prototype.item = function (index){
return this[index];
}
DOMTokenList.prototype.contains = function (myClass){
for(var i = this.length - 1; i >= 0 ; i--){
if(this[i] === myClass){
return true;
}
}
return false
}
DOMTokenList.prototype.add = function (newClass){
if(this.contains(newClass)){
return;
}
this.__self__.className += (this.__self__.className?" ":"")+newClass;
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.remove = function (oldClass){
if(!this.contains(newClass)){
return;
}
this[this.indexOf(oldClass)] = undefined
this.__self__.className = this.join(' ').replace(/ +/, ' ')
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.toggle = function (aClass){
this[this.contains(aClass)? 'remove' : 'add'](aClass)
return this.contains(aClass);
}
DOMTokenList.prototype.replace = function (oldClass, newClass){
this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
}
Object.defineProperty(Element.prototype, 'classList', {
get: function() {
return new DOMTokenList( this.className, this );
},
enumerable: false
})
}Um näher darauf einzugehen, was andere gesagt haben, werden mehrere CSS-Klassen in einer einzigen Zeichenfolge kombiniert, die durch Leerzeichen begrenzt ist. Wenn Sie es also fest codieren möchten, sieht es einfach so aus:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>Von dort aus können Sie leicht das zum Hinzufügen einer neuen Klasse erforderliche Javascript ableiten. Fügen Sie einfach ein Leerzeichen gefolgt von der neuen Klasse an die className-Eigenschaft des Elements an. Wenn Sie dies wissen, können Sie auch eine Funktion schreiben, um eine Klasse später zu entfernen, falls dies erforderlich sein sollte.
So fügen Sie Elementklassen auf einfache Weise hinzu, entfernen oder überprüfen sie:
var uclass = {
exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/ /g,' ');elem.className = c;}
};
var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');Sie können einen modernen Ansatz verwenden, der jQuery ähnelt
Wenn Sie nur ein Element ändern müssen, das erste, das JS in DOM findet, können Sie Folgendes verwenden:
document.querySelector('.someclass').className += " red";.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" only to first element in DOM</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>Denken Sie daran, vorher ein Leerzeichen zu lassen Klassennamen .
Wenn Sie mehrere Klassen haben, in denen Sie eine neue Klasse hinzufügen möchten, können Sie diese folgendermaßen verwenden
document.querySelectorAll('.someclass').forEach(function(element) {
element.className += " red";
});.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>Ich denke, es ist besser, reines JavaScript zu verwenden, das wir im DOM des Browsers ausführen können.
Hier ist die funktionale Art, es zu verwenden. Ich habe ES6 verwendet, kann aber auch ES5 und Funktionsausdruck oder Funktionsdefinition verwenden, je nachdem, was für Ihren JavaScript StyleGuide geeignet ist.
'use strict'
const oldAdd = (element, className) => {
let classes = element.className.split(' ')
if (classes.indexOf(className) < 0) {
classes.push(className)
}
element.className = classes.join(' ')
}
const oldRemove = (element, className) => {
let classes = element.className.split(' ')
const idx = classes.indexOf(className)
if (idx > -1) {
classes.splice(idx, 1)
}
element.className = classes.join(' ')
}
const addClass = (element, className) => {
if (element.classList) {
element.classList.add(className)
} else {
oldAdd(element, className)
}
}
const removeClass = (element, className) => {
if (element.classList) {
element.classList.remove(className)
} else {
oldRemove(element, className)
}
}Probe mit reinem JS. Im ersten Beispiel erhalten wir die ID unseres Elements und fügen zB 2 Klassen hinzu.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})Im zweiten Beispiel erhalten wir den Klassennamen des Elements und fügen 1 weitere hinzu.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})Für diejenigen, die Lodash verwenden und die classNameZeichenfolge aktualisieren möchten :
// get element reference
var elem = document.getElementById('myElement');
// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()
// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()Geben Sie dem Div zuerst eine ID. Rufen Sie dann die Funktion appendClass auf:
<script language="javascript">
function appendClass(elementId, classToAppend){
var oldClass = document.getElementById(elementId).getAttribute("class");
if (oldClass.indexOf(classToAdd) == -1)
{
document.getElementById(elementId).setAttribute("class", classToAppend);
}
}
</script>indexOfist eine naive Lösung und hat ein Problem bereits aufgezeigt .
Mit der API querySelector können Sie Ihr Element auswählen und anschließend eine Funktion mit dem Element und dem neuen Klassennamen als Parametern erstellen. Verwenden der Klassenliste für moderne Browser, sonst für IE8. Dann können Sie die Funktion nach einem Ereignis aufrufen.
//select the dom element
var addClassVar = document.querySelector('.someclass');
//define the addclass function
var addClass = function(el,className){
if (el.classList){
el.classList.add(className);
}
else {
el.className += ' ' + className;
}
};
//call the function
addClass(addClassVar, 'newClass');document.getElementById('some_id').className+=' someclassname'ODER:
document.getElementById('come_id').classList.add('someclassname')Der erste Ansatz half beim Hinzufügen der Klasse, wenn der zweite Ansatz nicht funktionierte.
Vergessen Sie nicht, einen Platz vor dem' someclassname' beim ersten Anflug .
Zum Entfernen können Sie verwenden:
document.getElementById('some_id').classList.remove('someclassname')Dieser JS-Code funktioniert für mich
bietet Ersatz für Klassennamen
var DDCdiv = hEle.getElementBy.....
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta[i] = 'hidden';
break;// quit for loop
}
else if (Ta[i] == 'hidden'){
Ta[i] = 'visible';
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameZum Hinzufügen einfach verwenden
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameZum Entfernen verwenden
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta.splice( i, 1 );
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameHoffe, das ist für jemanden hilfreich
Wenn Sie in YUI yuidom einschließen , können Sie verwenden
YAHOO.util.Dom.addClass('div1','className');
HTH
element.classList.add("my-class")stattdessen.