StyleSheet.href — Eigenschaft · JavaScript-Referenz

Signatur

StyleSheet.href

Beschreibung

Die Eigenschaft href der Schnittstelle StyleSheet (und damit auch von CSSStyleSheet) gibt den Speicherort des Stylesheets als vollständig aufgelöste, absolute URL zurück. Relative Angaben aus dem href-Attribut eines <link>-Elements oder aus einer @import-Regel werden dabei gegen die Basis-URL des Dokuments aufgelöst.

Bei Stylesheets, die direkt im Dokument stehen – also <style>-Elemente oder mit new CSSStyleSheet() erzeugte „konstruierte“ Stylesheets –, ist der Wert null. So lassen sich externe und eingebettete Stylesheets leicht voneinander unterscheiden.

Typische Einsatzgebiete sind Werkzeuge, die alle geladenen Stylesheets einer Seite auflisten, das gezielte Auffinden eines bestimmten Stylesheets (etwa um es zu deaktivieren oder auszutauschen), Debugging sowie Prüfungen, ob die CSS-Regeln eines Stylesheets wegen CORS überhaupt lesbar sind.

Die Eigenschaft ist schreibgeschützt. Wer die Quelle eines Stylesheets ändern möchte, muss das href-Attribut des zugehörigen <link>-Elements (erreichbar über sheet.ownerNode) setzen.

Rückgabewert

Typ

string | null

Beschreibung

Die absolute URL des Stylesheets als string oder null, wenn das Stylesheet eingebettet (<style>) bzw. per Konstruktor erzeugt wurde.

Beispiele

Alle Stylesheets einer Seite auflisten

// Externe und eingebettete Stylesheets unterscheiden
const sheets = [...document.styleSheets];

sheets.forEach((sheet, index) => {
  const quelle = sheet.href ?? '(eingebettet)';
  console.log(`#${index}: ${quelle}`);
});

#0: https://example.com/css/main.css #1: https://cdn.example.net/lib/reset.css #2: (eingebettet)

Ein bestimmtes Stylesheet anhand der URL finden und deaktivieren

const findeStylesheet = (dateiname) =>
  [...document.styleSheets].find(
    (sheet) => sheet.href && new URL(sheet.href).pathname.endsWith(dateiname)
  );

const darkTheme = findeStylesheet('/dark.css');

if (darkTheme) {
  darkTheme.disabled = true; // Dark-Theme ausschalten
  console.log(`Deaktiviert: ${darkTheme.href}`);
} else {
  console.log('dark.css ist nicht geladen.');
}

Deaktiviert: https://example.com/themes/dark.css

Relative URL wird absolut aufgelöst

// Seite: https://example.com/blog/artikel.html
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '../css/print.css';

link.addEventListener('load', () => {
  console.log(link.getAttribute('href')); // Attributwert
  console.log(link.sheet.href);           // aufgelöste URL
});

document.head.append(link);

../css/print.css https://example.com/css/print.css

Fremd-Stylesheets erkennen, deren Regeln nicht lesbar sind

const pruefeLesbarkeit = () => {
  for (const sheet of document.styleSheets) {
    if (!sheet.href) continue; // eingebettete sind immer lesbar

    try {
      const anzahl = sheet.cssRules.length;
      console.log(`${sheet.href}: ${anzahl} Regeln`);
    } catch (err) {
      console.warn(`${sheet.href}: Zugriff verweigert (${err.name})`);
    }
  }
};

pruefeLesbarkeit();

https://example.com/css/main.css: 142 Regeln https://fonts.googleapis.com/css2?family=Inter: Zugriff verweigert (SecurityError)

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an sheet.href wird ignoriert (im Strict Mode ggf. TypeError). Zum Wechseln der Quelle sheet.ownerNode.href bzw. das Attribut des <link>-Elements ändern.
null prüfen: Bei <style>-Elementen und konstruierten Stylesheets (new CSSStyleSheet(), adoptedStyleSheets) ist der Wert null – Aufrufe wie sheet.href.endsWith(…) werfen dann einen Fehler. Optional Chaining (sheet.href?.endsWith(…)) verwenden.
Absolute vs. Attribut-URL: href liefert immer die aufgelöste URL, nicht den wörtlichen Attributwert. Für den Originalwert ownerNode.getAttribute('href') nutzen.
Weiterleitungen: Der Wert entspricht der angeforderten URL, nicht zwingend der nach HTTP-Redirects tatsächlich geladenen.
CORS: href ist auch für Stylesheets anderer Herkunft lesbar, cssRules dagegen nur mit passendem crossorigin-Attribut und CORS-Header – sonst SecurityError.
@import: Per @import geladene Stylesheets erscheinen nicht direkt in document.styleSheets, sondern über CSSImportRule.styleSheet; auch dort liefert href die absolute URL.
Kompatibilität: In allen modernen Browsern seit Langem unterstützt.

Siehe auch

StyleSheet CSSStyleSheet Document.styleSheets StyleSheet.ownerNode StyleSheet.disabled CSSStyleSheet.cssRules HTMLLinkElement.href