Signatur
Beschreibung
Die Eigenschaft cssText eines CSSStyleDeclaration-Objekts gibt alle darin enthaltenen Deklarationen als einen serialisierten CSS-String zurück, etwa "color: red; margin: 0px;". Beim Schreiben wird der String geparst und ersetzt alle bestehenden Deklarationen. Die übrigen gehen also verloren.
Meistens greift man darüber auf element.style.cssText zu, also auf den Inline-Stil (das style-Attribut) eines Elements. Das ist praktisch, wenn man mehrere Eigenschaften auf einmal setzen will, statt jede einzeln über style.color, style.margin usw. zuzuweisen. Außerdem löst eine Zuweisung nur einen einzigen Stil-Update-Vorgang aus. Mit cssText = "" entfernt man alle Inline-Stile auf einmal.
Auch CSSStyleRule.style.cssText ist verfügbar. Damit lesen oder ändern Sie die Deklarationen einer Stylesheet-Regel. Bei getComputedStyle() ist das zurückgegebene Objekt dagegen schreibgeschützt: Schreiben löst dort einen NoModificationAllowedError aus. Das Lesen liefert je nach Browser einen leeren String (bisher Firefox) oder eine vollständige Liste (Chromium).
Ungültige Deklarationen im zugewiesenen String werden stillschweigend verworfen. Werte werden beim Lesen normalisiert: Aus margin: 0 wird z. B. margin: 0px;, und Farben können als rgb(...) erscheinen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | Nur beim Schreiben: CSS-Deklarationen ohne Selektor und geschweifte Klammern, z. B. "color: red; padding: 4px". Ersetzt alle bestehenden Deklarationen. |
Rückgabewert
; getrennt. Gibt es keine Deklarationen, ist das Ergebnis ein leerer String.Beispiele
Inline-Stile auslesen
const box = document.createElement('div');
box.style.color = 'red';
box.style.margin = '0';
console.log(box.style.cssText);Mehrere Stile auf einmal setzen (ersetzt alles)
const toast = document.createElement('div');
toast.style.opacity = '0.5';
toast.style.cssText = 'position: fixed; bottom: 1rem; right: 1rem; padding: 8px 12px; background: #333; color: white;';
document.body.append(toast);
// opacity wurde überschrieben und ist weg
console.log(toast.style.opacity === '');Stile anhängen statt ersetzen und alle entfernen
const el = document.createElement('p');
el.style.cssText = 'color: blue;';
// Anhängen: bestehenden Text weiterverwenden
el.style.cssText += 'font-weight: bold; foo: bar;'; // ungültiges 'foo' wird verworfen
console.log(el.style.cssText);
// Alle Inline-Stile entfernen
el.style.cssText = '';
console.log(el.getAttribute('style'));Regel in einem Stylesheet ändern
const sheet = new CSSStyleSheet();
sheet.replaceSync('.btn { color: black; }');
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
const rule = sheet.cssRules[0];
rule.style.cssText = 'color: white; background: rebeccapurple;';
console.log(rule.cssText);// Wichtig · Fallstricke
- Überschreibt alles: Eine Zuweisung löscht zuvor gesetzte Inline-Stile, auch die von anderen Skripten oder Bibliotheken. Zum Ergänzen verwenden Sie
style.setProperty()odercssText += '...'. Achten Sie beim Anhängen auf das abschließende Semikolon. - Ungültiges wird still verworfen: Es gibt keine Fehlermeldung. Prüfen Sie Werte vorher mit
CSS.supports(). - Normalisierung: Der gelesene String entspricht nicht unbedingt dem geschriebenen. Einheiten, Farbformate und Kurzschreibweisen (Shorthands) können sich ändern. Vergleichen Sie deshalb keine Strings 1:1.
- Schreibgeschützt bei
getComputedStyle(): Schreiben löst einenNoModificationAllowedErroraus. Beim Lesen verhalten sich die Browser unterschiedlich. - Sicherheit/CSP: Wenn Sie Benutzereingaben ungeprüft in
cssTextübernehmen, kann das zu CSS-Injection führen, z. B. zubackground: url(...)-Anfragen an fremde Server (Datenabfluss). Das Setzen über CSSOM wird vonstyle-src 'unsafe-inline'in der CSP nicht blockiert, ein direkt geschriebenesstyle-Attribut dagegen schon. !importantkann im String angegeben werden, z. B.'color: red !important'.