Signatur
Beschreibung
item() gibt den Namen einer CSS-Eigenschaft zurück, nicht ihren Wert. Die Eigenschaft wird über ihre Position (Index) in einer CSSStyleDeclaration ausgewählt. Zusammen mit length kannst du damit alle gesetzten Eigenschaften durchlaufen, etwa die Inline-Styles eines Elements (element.style), die Deklarationen einer CSS-Regel (CSSStyleRule.style) oder das Ergebnis von getComputedStyle().
Den Wert zu einem Namen liest du anschließend mit getPropertyValue(name) aus, die Priorität ("important" oder leer) mit getPropertyPriority(name). Die Namen stehen in der CSS-Schreibweise mit Bindestrichen, also background-color und nicht backgroundColor. Benutzerdefinierte Eigenschaften (Custom Properties) erscheinen mit ihrem vollständigen Namen, z. B. --main-color.
Statt style.item(i) kannst du auch die Klammer-Schreibweise style[i] verwenden. Der Unterschied zeigt sich bei einem Index außerhalb des Bereichs: item() gibt einen leeren String zurück, die Klammer-Schreibweise dagegen undefined.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $index Pflicht | number | Nullbasierte Position der gesuchten Eigenschaft. Der Wert wird in einen vorzeichenlosen 32-Bit-Integer umgewandelt (unsigned long). Gültige Werte liegen von 0 bis length - 1. |
Rückgabewert
"color" oder "--gap". Liegt der Index außerhalb des gültigen Bereichs, ist der Rückgabewert der leere String "".Beispiele
Inline-Styles eines Elements auflisten
const box = document.createElement('div');
box.style.cssText = 'color: red; padding: 8px !important; --gap: 4px;';
for (let i = 0; i < box.style.length; i++) {
const name = box.style.item(i);
const value = box.style.getPropertyValue(name);
const prio = box.style.getPropertyPriority(name);
console.log(`${name}: ${value}${prio ? ' !' + prio : ''}`);
}Index außerhalb des Bereichs: item() und Klammer-Schreibweise im Vergleich
const el = document.createElement('p');
el.style.color = 'blue';
console.log(el.style.length); // 1
console.log(el.style.item(0)); // "color"
console.log(JSON.stringify(el.style.item(5))); // leerer String
console.log(el.style[5]); // undefinedInline-Styles als Objekt serialisieren (z. B. für Undo oder Snapshots)
const snapshotInlineStyles = (element) => {
const { style } = element;
const result = {};
for (let i = 0; i < style.length; i++) {
const name = style.item(i);
result[name] = style.getPropertyValue(name);
}
return result;
};
const btn = document.createElement('button');
btn.style.backgroundColor = 'tomato';
btn.style.borderRadius = '4px';
console.log(Object.keys(snapshotInlineStyles(btn)));Anzahl berechneter Eigenschaften über getComputedStyle()
const computed = getComputedStyle(document.body);
console.log(computed.length > 100); // true – sehr viele Eigenschaften
console.log(typeof computed.item(0)); // "string"
console.log(computed.item(computed.length)); // "" (außerhalb des Bereichs)// Wichtig · Fallstricke
- Kurzschreibweisen werden aufgeteilt: Setzt du eine Kurzschreibweise wie
margin,paddingoderborder-radius, liefertitem()die einzelnen Langformen (z. B.margin-top,margin-right…). Die Kurzschreibweise selbst taucht nicht als eigener Eintrag auf. Die Anzahl und Reihenfolge der Langformen kann sich je nach Browser leicht unterscheiden. - Nur der Name, nicht der Wert: Den Wert musst du mit
getPropertyValue()separat abfragen. - Negative Indizes:
item(-1)liefert nicht den letzten Eintrag. Der Wert wird zu4294967295umgewandelt, und das Ergebnis ist"". Für den letzten Eintrag nimmst duitem(style.length - 1). - Aufruf ohne Argument: Er wirft in modernen Browsern einen
TypeError, weilindexein Pflichtparameter ist. - Nur Inline-Styles:
element.styleenthält nur die Inline-Styles des Elements. Styles aus Stylesheets bekommst du übergetComputedStyle(). Diese Deklaration ist schreibgeschützt und enthält sehr viele Eigenschaften, deshalb solltest du nicht in engen Schleifen darüber iterieren. - Kompatibilität: Die Methode wird von allen aktuellen Browsern unterstützt, auch von sehr alten wie dem IE 9.