Signatur
Beschreibung
Die Eigenschaft size gibt an, wie viele CSS-Eigenschaften eine StylePropertyMapReadOnly enthält. Sie funktioniert wie Map.prototype.size und ist Teil der CSS Typed Object Model API (CSS Typed OM).
Eine StylePropertyMapReadOnly bekommt man meistens über element.computedStyleMap(). Diese Map enthält alle berechneten Eigenschaften eines Elements, auch Standardwerte und benutzerdefinierte Eigenschaften (--*). Deshalb ist size hier fast immer eine große Zahl im Bereich von mehreren Hundert. Die genaue Zahl hängt vom Browser und von dessen Version ab.
Bei einer beschreibbaren StylePropertyMap, etwa aus element.attributeStyleMap, zählt size nur die Eigenschaften, die tatsächlich im style-Attribut stehen. Damit können Sie leicht prüfen, ob ein Element überhaupt Inline-Stile hat, oder Diagnosewerte ausgeben.
Rückgabewert
Beispiele
Anzahl der berechneten Eigenschaften eines Elements
const button = document.querySelector('button');
const computed = button.computedStyleMap();
// Anzahl aller berechneten CSS-Eigenschaften
console.log(`Berechnete Eigenschaften: ${computed.size}`);Prüfen, ob ein Element Inline-Stile hat
const box = document.createElement('div');
console.log(box.attributeStyleMap.size); // 0
box.attributeStyleMap.set('width', CSS.px(200));
box.attributeStyleMap.set('opacity', 0.5);
const hatInlineStile = box.attributeStyleMap.size > 0;
console.log(box.attributeStyleMap.size, hatInlineStile);size mit Iteration abgleichen
const el = document.body;
el.style.cssText = 'margin: 0; color: rebeccapurple; --akzent: #f60;';
const map = el.attributeStyleMap;
const namen = [...map.keys()];
console.log(map.size === namen.length); // true
console.log(namen);// Wichtig · Fallstricke
- Browser-Kompatibilität: CSS Typed OM gibt es in Chromium-Browsern ab Version 66 und in Safari ab 16.4. In Firefox ist es bisher nicht allgemein verfügbar. Prüfen Sie die Unterstützung vorher, zum Beispiel mit
if ('computedStyleMap' in Element.prototype). - Bei
computedStyleMap()hängtsizevom Browser ab. Die Zahl ändert sich, wenn neue CSS-Eigenschaften unterstützt werden. Verwenden Sie diesen Wert deshalb nicht in Tests oder in Programmlogik. - Kurzschreibweisen wie
marginwerden oft in Einzel-Eigenschaften aufgeteilt, zum Beispielmargin-top. Dadurch kannsizegrößer sein, als man nach dem Quelltext erwarten würde. sizeist schreibgeschützt. Eine Zuweisung wird ignoriert und löst im Strict Mode einenTypeErroraus.- Die Map ist live: Ändert sich der Stil, ändert sich auch
size. Wenn Sie den Wert später noch brauchen, speichern Sie ihn in einer Variablen.