Signatur
Beschreibung
StyleSheet ist die abstrakte Basisschnittstelle des CSS Object Model (CSSOM) für ein einzelnes Stylesheet. Sie ist sprachunabhängig definiert. In der Praxis begegnet man ihr aber fast nur über die abgeleitete Schnittstelle CSSStyleSheet, die zusätzlich Zugriff auf die Regeln (cssRules, insertRule(), replace() usw.) bietet.
Die Schnittstelle stellt allgemeine Metadaten bereit:
type: MIME-Typ, bei CSS immer"text/css"href: URL der externen Datei odernullbei Inline-StylesownerNode: das<link>- oder<style>-Element, das das Stylesheet einbindetparentStyleSheet: das übergeordnete Stylesheet bei@importtitle: Titel für alternative Stylesheetsmedia: eineMediaListmit den Media Queriesdisabled: schreibbar, schaltet das Stylesheet ein oder aus
Alle eingebundenen Stylesheets bekommt man über document.styleSheets (eine StyleSheetList), über element.sheet an <style>- und <link>-Elementen und über shadowRoot.styleSheets. Typische Aufgaben sind Theme-Umschaltung per disabled, Debugging (welche Stylesheets sind geladen und woher kommen sie?) und das Auswerten von Media-Bedingungen.
Einen Konstruktor hat StyleSheet nicht: new StyleSheet() wirft einen TypeError. Wer Stylesheets per Skript erzeugen will, verwendet den Konstruktor von CSSStyleSheet (Constructable Stylesheets).
Rückgabewert
document.styleSheets[i] oder styleElement.sheet. Sie sind in der Regel vom Typ CSSStyleSheet.Beispiele
Alle Stylesheets des Dokuments auflisten
// Metadaten jedes eingebundenen Stylesheets ausgeben
for (const sheet of document.styleSheets) {
console.log({
type: sheet.type,
href: sheet.href ?? '(inline)',
owner: sheet.ownerNode?.nodeName,
media: sheet.media.mediaText || 'all',
disabled: sheet.disabled,
istStyleSheet: sheet instanceof StyleSheet
});
}Dark-Mode per disabled umschalten
// HTML: <link rel="stylesheet" href="dark.css" id="dark-theme">
const darkLink = document.getElementById('dark-theme');
const setDarkMode = (aktiv) => {
// link.sheet ist erst nach dem Laden verfügbar
if (darkLink.sheet) darkLink.sheet.disabled = !aktiv;
};
darkLink.addEventListener('load', () => setDarkMode(false));
document.querySelector('#toggle').addEventListener('click', () => {
setDarkMode(darkLink.sheet.disabled);
});Stylesheet aus einem <style>-Element und kein Konstruktor
const style = document.createElement('style');
style.media = 'screen and (min-width: 600px)';
style.textContent = 'body { background: #eef; }';
document.head.append(style);
const sheet = style.sheet;
console.log(sheet.ownerNode === style); // true
console.log(sheet.media.mediaText);
console.log(sheet.href);
try {
new StyleSheet();
} catch (e) {
console.log(e.constructor.name);
}// Wichtig · Fallstricke
- Kein Konstruktor:
StyleSheetist abstrakt. Für dynamisch erzeugte Stylesheets verwendet mannew CSSStyleSheet()zusammen mitdocument.adoptedStyleSheets. - Timing:
linkElement.sheetistnull, solange die Datei nicht geladen ist. Deshalb auf dasload-Ereignis warten. - Cross-Origin: Die Metadaten dieser Schnittstelle (
href,disabled,media) sind auch bei Stylesheets von fremden Domains lesbar. Wer aber überCSSStyleSheet.cssRulesauf die Regeln zugreift, bekommt ohne CORS-Freigabe (crossorigin-Attribut plus passender Server-Header) einenSecurityError. - disabled vs. Attribut:
sheet.disabledist nicht dasselbe wie das HTML-Attributdisabledam<link>. Wird das Element neu eingehängt, entsteht ein neues Stylesheet-Objekt und der Zustand geht verloren. ownerNodeistnullbei Stylesheets, die per@importeingebunden sind (dann istparentStyleSheetgesetzt), und bei per Konstruktor erzeugten Stylesheets.- Kompatibilität: wird seit Jahren von allen modernen Browsern unterstützt.