StylePropertyMapReadOnly.has() — Methode · JavaScript-Referenz

Signatur

StylePropertyMapReadOnly.prototype.has(property)

Beschreibung

Die Methode has() gehört zum CSS Typed Object Model (Houdini). Sie prüft, ob die übergebene CSS-Eigenschaft in einer StylePropertyMapReadOnly enthalten ist. Solche Maps bekommt man vor allem über element.computedStyleMap() (berechnete Stile, nur lesbar) oder über element.attributeStyleMap. Letztere ist eine StylePropertyMap, die von StylePropertyMapReadOnly erbt und has() daher ebenfalls anbietet.

Welches Ergebnis Sie erhalten, hängt stark von der Quelle der Map ab:

attributeStyleMap: enthält nur Eigenschaften, die im style-Attribut des Elements gesetzt sind. Mit has() lässt sich hier also prüfen, ob ein Inline-Stil gesetzt ist.
computedStyleMap(): enthält jede vom Browser unterstützte Standard-Eigenschaft. Für normale Eigenschaften liefert has() hier fast immer true. Aussagekräftig ist die Methode vor allem bei benutzerdefinierten Eigenschaften (--name), die nur dann vorhanden sind, wenn sie für das Element tatsächlich definiert oder vererbt wurden.

Typische Einsatzfälle sind: vor einem get() prüfen, ob ein Wert überhaupt existiert, einen Inline-Stil nur dann setzen, wenn noch keiner da ist, oder erkennen, ob ein Theme bzw. eine Komponente eine bestimmte CSS-Variable bereitstellt.

Parameter

Name	Typ	Default	Beschreibung
$property Pflicht	string		Name der CSS-Eigenschaft in CSS-Schreibweise, z. B. `'background-color'` (nicht `'backgroundColor'`), oder eine benutzerdefinierte Eigenschaft wie `'--accent'`. Standard-Eigenschaften werden ohne Beachtung der Groß- und Kleinschreibung verglichen, benutzerdefinierte Eigenschaften mit.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn die Eigenschaft in der Map vorhanden ist, sonst false.

Beispiele

Prüfen, ob ein Inline-Stil gesetzt ist

const box = document.createElement('div');
box.style.padding = '12px';
document.body.append(box);

console.log(box.attributeStyleMap.has('padding'));      // im style-Attribut gesetzt
console.log(box.attributeStyleMap.has('margin'));       // nicht gesetzt

// Wert nur setzen, wenn noch kein Inline-Wert existiert
if (!box.attributeStyleMap.has('margin')) {
  box.attributeStyleMap.set('margin', CSS.px(8));
}
console.log(box.getAttribute('style'));

true false padding: 12px; margin: 8px;

Benutzerdefinierte Eigenschaft (CSS-Variable) erkennen

// CSS: .card { --accent: #0af; }
const card = document.querySelector('.card');
const computed = card.computedStyleMap();

if (computed.has('--accent')) {
  const accent = computed.get('--accent').toString().trim();
  console.log(`Akzentfarbe: ${accent}`);
} else {
  console.log('Keine Akzentfarbe definiert – Standard wird verwendet');
}

Akzentfarbe: #0af

Funktionsprüfung mit Rückfall auf getComputedStyle

const hasCustomProp = (el, name) => {
  if (typeof el.computedStyleMap === 'function') {
    return el.computedStyleMap().has(name);
  }
  // Rückfall für Browser ohne CSS Typed OM (z. B. Firefox)
  return getComputedStyle(el).getPropertyValue(name).trim() !== '';
};

console.log(hasCustomProp(document.documentElement, '--brand-color'));

true

// Wichtig · Fallstricke

Browserunterstützung: Das CSS Typed OM gibt es in Chromium-Browsern ab Version 66 und in Safari ab 16.4. Firefox unterstützt es bisher nicht. Prüfen Sie deshalb vorher, ob 'computedStyleMap' in Element.prototype gilt, und sehen Sie einen Rückfall über getComputedStyle() vor.
Ungültige Namen: Ist property weder eine gültige CSS-Eigenschaft noch eine benutzerdefinierte Eigenschaft (--…), wirft der Browser laut Spezifikation einen TypeError. Die Methode liefert dann nicht einfach false. Übergeben Sie unsichere Namen daher in einem try/catch.
Schreibweise: Erwartet wird die CSS-Schreibweise mit Bindestrich ('font-size'), nicht die camelCase-Schreibweise aus element.style.
Berechnete Stile: Bei computedStyleMap() gibt has() für fast alle Standard-Eigenschaften true zurück, weil jede Eigenschaft einen berechneten Wert hat. Ob ein Stylesheet einen Wert ausdrücklich gesetzt hat, lässt sich damit also nicht feststellen.
Die Map von computedStyleMap() ist eine Momentaufnahme. Nach Stiländerungen muss sie neu abgerufen werden.

Siehe auch

StylePropertyMapReadOnly.get() StylePropertyMapReadOnly.keys() StylePropertyMapReadOnly.values() StylePropertyMapReadOnly.getAll() StylePropertyMapReadOnly.entries()