Ich habe ein Element, das bereits eine Klasse hat:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>Nun möchte ich eine JavaScript-Funktion erstellen, die eine Klasse zu der div (nicht ersetzen, sondern hinzufügen).
Wie kann ich das tun?
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 ein Leerzeichen und den Namen Ihrer neuen Klasse in das Feld className Eigenschaft des Elements. Setzen Sie zunächst eine id auf das Element, so dass 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 Raum einzubeziehen, da sonst bestehende Klassen, die in der Klassenliste vor der Klasse stehen, beeinträchtigt werden.
Siehe auch element.className auf MDN .
Der einfachste Weg, dies ohne ein Framework zu tun, ist die Verwendung von element.classList.add Methode.
var element = document.getElementById("div1");
element.classList.add("otherclass");Bearbeiten: Und wenn Sie die Klasse aus einem Element entfernen wollen -
element.classList.remove("otherclass");Ich ziehe es vor, nicht selbst Leerraum und doppelte Einträge hinzufügen zu müssen (was bei Verwendung der document.className Ansatz). Es gibt einige Browser-Einschränkungen aber Sie können sie umgehen, indem Sie Polyfills .
Kreuzkompatibel
Im folgenden Beispiel fügen wir eine classname zum <body> Element. Dies ist mit 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';
}Leistung
Wenn Sie mehr Wert auf die Leistung als auf die Kompatibilität legen, können Sie es wie folgt kürzen, was 4 % schneller ist.
var z = document.body;
document.body.classList.add('wait');Bequemlichkeit
Alternativ könnten Sie auch jQuery verwenden, aber die daraus resultierende Leistung ist erheblich langsamer. 94% langsamer laut jsPerf
$('body').addClass('wait');Leistung
Mit jQuery selektiv ist die beste Methode zum Entfernen einer Klasse, wenn Sie mit der Leistung besorgt
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")
JavaScript bietet 2 verschiedene Möglichkeiten, wie Sie HTML-Elementen Klassen hinzufügen können:
element.classList.add() MethodeclassName EigenschaftMit beiden Methoden können Sie einzelne oder mehrere Klassen auf einmal hinzufügen.
element.classList.add() Methodevar element = document.querySelector('.box');
// using add method
// adding single class
element.classList.add('color');
// adding multiple class
element.classList.add('border', 'shadow');
.box {
width: 200px;
height: 100px;
}
.color {
background: skyblue;
}
.border {
border: 2px solid black;
}
.shadow {
box-shadow: 5px 5px 5px gray;
}
<div class="box">My Box</div>element.className EigentumHinweis : Verwenden Sie immer += Operator und fügen Sie ein Leerzeichen vor dem Klassennamen ein, um die Klasse mit der classList-Methode hinzuzufügen.
var element = document.querySelector('.box');
// using className Property
// adding single class
element.className += ' color';
// adding multiple class
element.className += ' border shadow';
.box {
width: 200px;
height: 100px;
}
.color {
background: skyblue;
}
.border {
border: 2px solid black;
}
.shadow {
box-shadow: 5px 5px 5px gray;
}
<div class="box">My Box</div> CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
