CSSStyleDeclaration.getPropertyPriority() — Methode · JavaScript-Referenz

Signatur

CSSStyleDeclaration.prototype.getPropertyPriority(property)

Beschreibung

getPropertyPriority() sagt dir, ob eine CSS-Eigenschaft in einem CSSStyleDeclaration-Objekt mit !important gesetzt wurde. Ist das so, bekommst du den String "important" zurück (ohne Ausrufezeichen). Wurde keine Priorität gesetzt oder gibt es die Eigenschaft in der Deklaration nicht, ist das Ergebnis ein leerer String "".

Gebraucht wird die Methode vor allem beim Untersuchen und Umschreiben von Styles, zum Beispiel für Inline-Styles über element.style oder für Regeln aus Stylesheets über CSSStyleRule.style. Das ist praktisch, wenn ein Skript Styles kopieren, zusammenführen oder zurücksetzen soll, ohne dass die !important-Markierung verloren geht.

Die Methode arbeitet nur mit der jeweiligen Deklaration selbst. Sie sagt also nichts darüber, ob irgendwo anders im Kaskadenverlauf ein !important greift. Das berechnete Style-Objekt aus getComputedStyle() enthält grundsätzlich keine Prioritäten. Dort ist das Ergebnis immer "".

Parameter

Name	Typ	Default	Beschreibung
$property Pflicht	string		Name der CSS-Eigenschaft in CSS-Schreibweise mit Bindestrichen (z. B. `"background-color"`, nicht `"backgroundColor"`). Benutzerdefinierte Eigenschaften wie `"--main-color"` sind erlaubt.

Rückgabewert

Typ

string

Beschreibung

"important", wenn die Eigenschaft mit !important gesetzt wurde, sonst ein leerer String "".

Beispiele

Priorität eines Inline-Styles prüfen

const box = document.createElement('div');
box.style.cssText = 'color: red !important; margin: 10px;';

console.log(box.style.getPropertyPriority('color'));
console.log(box.style.getPropertyPriority('margin'));
console.log(box.style.getPropertyPriority('padding'));

important "" "" (die beiden letzten Aufrufe liefern jeweils einen leeren String)

Style samt Priorität auf ein anderes Element kopieren

const copyStyle = (source, target, prop) => {
  const value = source.style.getPropertyValue(prop);
  const priority = source.style.getPropertyPriority(prop);
  target.style.setProperty(prop, value, priority);
};

const a = document.createElement('p');
const b = document.createElement('p');
a.style.setProperty('background-color', 'gold', 'important');

copyStyle(a, b, 'background-color');
console.log(b.style.cssText);

background-color: gold !important;

!important-Regeln in Stylesheets finden

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  .btn { color: white !important; padding: 4px; }
  .card { border: 1px solid #ccc !important; }
`);

for (const rule of sheet.cssRules) {
  for (const prop of rule.style) {
    if (rule.style.getPropertyPriority(prop) === 'important') {
      console.log(`${rule.selectorText} → ${prop}`);
    }
  }
}

.btn → color .card → border-top-width ... (Kurzschreibweisen wie border werden in Einzeleigenschaften zerlegt; die genaue Liste hängt vom Browser ab)

Benutzerdefinierte Eigenschaft (CSS-Variable) prüfen

const root = document.documentElement;
root.style.setProperty('--accent', '#0af', 'important');

console.log(root.style.getPropertyPriority('--accent'));

important

// Wichtig · Fallstricke

Nur CSS-Schreibweise mit Bindestrichen: getPropertyPriority('fontSize') liefert immer "". Richtig ist 'font-size'.
Leerer String ist doppeldeutig: "" kann heißen „ohne !important gesetzt“ oder „gar nicht vorhanden“. Um das zu unterscheiden, zusätzlich getPropertyValue() prüfen.
Kurzschreibweisen: Bei Eigenschaften wie margin oder border liefern Browser "important" nur dann zuverlässig, wenn alle zugehörigen Einzeleigenschaften dieselbe Priorität haben.
getComputedStyle(): Berechnete Styles enthalten keine Prioritäten. Das Ergebnis ist dort immer "".
Rückgabewert ohne Ausrufezeichen: Zurück kommt "important", nicht "!important". Genau diesen Wert erwartet auch setProperty() als dritten Parameter.
Kompatibilität: Wird von allen modernen Browsern seit Langem unterstützt (Teil von DOM Level 2 Style / CSSOM).

Siehe auch

CSSStyleDeclaration CSSStyleDeclaration.getPropertyValue() CSSStyleDeclaration.setProperty() CSSStyleDeclaration.removeProperty() HTMLElement.style Window.getComputedStyle()