Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.
Das Element.classList
ist eine read-only
Eigenschaft, welche die aktuelle DOMTokenList
Sammlung der Klassen-Attribute des Elements zurückgibt.
Die Benutzung von classList
ist eine angenehme Alternative zum Ansprechen der Klassen eines Elements, anstelle der leerzeichengetrennten Zeichenfolge via element.className
.
Syntax
const elementClasses = elementNodeReference.classList;
elementClasses ist eine DOMTokenList, welche die Klassen-Attribute der elementNodeReference repräsentiert. Wenn das Klassen-Attribut nicht gesetzt wurde oder elementClasses.length leer ist, wird 0 zurückgegeben. Element.classList
selbst ist nur lesbar (read-only), obgleich du es modifizieren kannst, indem du die add()
und remove()
Methoden anwendest.
Methoden
- add( String [, String [, ...]] )
- Fügt angegebene Klassenwerte hinzu. Wenn diese Klassen bereits im Attribut des Elements vorhanden sind, werden sie ignoriert.
- remove( String [, String [, ...]] )
- Ausgewählte Klassenwerte entfernen.
Bemerkung: Entfernen eines nicht vorhandenen Klassenwertes wirft keinen Fehler. - item ( Number )
- Rückgabewert nach Index in der Sammlung.
- toggle ( String [, force] )
- Wenn nur ein Argument vorhanden ist: Toggle class value; D.h. wenn die Klasse existiert, dann entfernt es diese und gibt ein
false
zurück, wenn nicht, dann fügt es diese hinzu und gibt eintrue
zurück. Wenn ein zweites Argument vorhanden ist: Wenn das zweite Argument auftrue
basiert, fügt es den angegebenen Klassenwert hinzu. Wenn erfalse
auswertet, entfernt es ihn. - contains( String )
- Überprüft, ob der angegebene Klassenwert im Klassenattribut des Elements vorhanden ist.
- replace( oldClass, newClass )
- Ersetzt einen vorhandenen Klassenwert.
Beispiele
// div is an object reference to a <div> element with class="foo bar" div.classList.remove("foo"); div.classList.add("anotherclass"); // if visible is set remove it, otherwise add it div.classList.toggle("visible"); // add/remove visible, depending on test conditional, i less than 10 div.classList.toggle("visible", i < 10 ); alert(div.classList.contains("foo")); // add or remove multiple classes div.classList.add("foo", "bar"); div.classList.remove("foo", "bar");
Versions of Firefox before 26 do not implement the use of several arguments in the add/remove/toggle methods. See https://bugzilla.mozilla.org/show_bug.cgi?id=814014
Polyfill
// Source: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca /** * Element.prototype.classList for IE8/9, Safari. * @author Kerem Güneş <k-gun@mail.com> * @copyright Released under the MIT License <https://opensource.org/licenses/MIT> * @version 1.2 * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/classList */ ;(function() { // Helpers. var trim = function(s) { return s.replace(/^\s+|\s+$/g, ''); }, regExp = function(name) { return new RegExp('(^|\\s+)'+ name +'(\\s+|$)'); }, forEach = function(list, fn, scope) { for (var i = 0; i < list.length; i++) { fn.call(scope, list[i]); } }; // Class list object with basic methods. function ClassList(element) { this.element = element; } ClassList.prototype = { add: function() { forEach(arguments, function(name) { if (!this.contains(name)) { this.element.className = trim(this.element.className +' '+ name); } }, this); }, remove: function() { forEach(arguments, function(name) { this.element.className = trim(this.element.className.replace(regExp(name), ' ')); }, this); }, toggle: function(name) { return this.contains(name) ? (this.remove(name), false) : (this.add(name), true); }, contains: function(name) { return regExp(name).test(this.element.className); }, item: function(i) { return this.element.className.split(/\s+/)[i] || null; }, // bonus replace: function(oldName, newName) { this.remove(oldName), this.add(newName); } }; // IE8/9, Safari // Remove this if statements to override native classList. if (!('classList' in Element.prototype)) { // Use this if statement to override native classList that does not have for example replace() method. // See browser compatibility: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility. // if (!('classList' in Element.prototype) || // !('classList' in Element.prototype && Element.prototype.classList.replace)) { Object.defineProperty(Element.prototype, 'classList', { get: function() { return new ClassList(this); } }); } // For others replace() support. if (window.DOMTokenList && !DOMTokenList.prototype.replace) { DOMTokenList.prototype.replace = ClassList.prototype.replace; } })();
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
HTML Living Standard Die Definition von 'Element.classList' in dieser Spezifikation. |
Lebender Standard | Note within the HTML specification related to the class attribute. |
DOM Die Definition von 'Element.classList' in dieser Spezifikation. |
Lebender Standard | Initial definition |
DOM4 Die Definition von 'Element.classList' in dieser Spezifikation. |
Veraltet |
Browserkompatibilität
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 8 | 12 | 3.6 (1.9.2) | 10[1] | 11.50 | 5.1 |
toggle() method's second argument |
24 | 12 | 24 (24) | Nicht unterstützt[2] | 15 | 7 |
Multiple arguments for add() & remove() |
28 | 12 | 26 (26) | Nicht unterstützt | 15 | 7 |
replace() |
Nicht unterstützt | ? | 49 (49) | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 3.0 | 12 | 1.0 (1.9.2) | 10[1] | 11.10 | 5.0 |
toggle method's second argument | 4.4 | 12 | 24.0 (24) | Nicht unterstützt[2] | ? | 7.0 |
multiple arguments for add() & remove() |
4.4 | 12 | ? | Nicht unterstützt | ? | 7.0 |
replace() |
Nicht unterstützt | ? | 49 (49) | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
[1] Not supported for SVG elements. See a report at Microsoft about that.
[2] Internet Explorer never implemented this. See a report at Microsoft about that.