Signatur
Beschreibung
Die Eigenschaft disabled des HTMLLinkElement-Interfaces spiegelt das HTML-Attribut disabled eines <link>-Elements wider. Sie ist nur bei Links mit rel="stylesheet" (bzw. rel="alternate stylesheet") wirksam: Ist sie true, wird das verknüpfte Stylesheet nicht auf das Dokument angewendet.
Wenn Sie die Eigenschaft auf true setzen, fügt der Browser dem Element das Attribut disabled hinzu. Mit false wird das Attribut entfernt, und das Stylesheet wird (bei Bedarf erst jetzt) geladen und angewendet. Steht das Attribut schon im HTML-Quelltext, lädt der Browser das Stylesheet zunächst gar nicht. Deshalb ist link.sheet in diesem Fall null.
Typische Einsatzfälle sind Themenwechsel (hell/dunkel), optionale Stylesheets für Barrierefreiheit (z. B. hoher Kontrast) und das Umschalten zwischen alternativen Stylesheets, ohne Elemente aus dem DOM entfernen oder neu einfügen zu müssen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | boolean | false | Beim Setzen: true deaktiviert den Link und fügt das Attribut disabled hinzu, false entfernt das Attribut. Andere Werte werden in einen booleschen Wert umgewandelt. |
Rückgabewert
true, wenn das Attribut disabled am <link>-Element gesetzt ist, sonst false.Beispiele
Status eines Stylesheets abfragen
// HTML: <link id="dark" rel="stylesheet" href="dark.css" disabled>
const darkLink = document.querySelector('#dark');
console.log(darkLink.disabled);
console.log(darkLink.hasAttribute('disabled'));
console.log(darkLink.sheet); // nicht geladenDunkles Theme per Button umschalten
// HTML:
// <link id="theme-dark" rel="stylesheet" href="dark.css" disabled>
// <button id="toggle">Theme wechseln</button>
const darkTheme = document.querySelector('#theme-dark');
const toggle = document.querySelector('#toggle');
// gespeicherte Einstellung wiederherstellen
darkTheme.disabled = localStorage.getItem('theme') !== 'dark';
toggle.addEventListener('click', () => {
darkTheme.disabled = !darkTheme.disabled;
localStorage.setItem('theme', darkTheme.disabled ? 'light' : 'dark');
console.log(`Dunkles Theme aktiv: ${!darkTheme.disabled}`);
});Zwischen alternativen Stylesheets wechseln
// HTML:
// <link rel="stylesheet" title="Standard" href="default.css">
// <link rel="alternate stylesheet" title="Kontrast" href="contrast.css">
const activateStyle = (title) => {
const links = document.querySelectorAll('link[rel~="stylesheet"][title]');
links.forEach((link) => {
link.disabled = link.title !== title;
});
};
activateStyle('Kontrast');
console.log(
[...document.querySelectorAll('link[title]')]
.map((l) => `${l.title}: ${l.disabled ? 'aus' : 'an'}`)
);// Wichtig · Fallstricke
- Nicht mit
CSSStyleSheet.disabledverwechseln:link.sheet.disabledschaltet nur das bereits geladene Stylesheet-Objekt um und ändert das HTML-Attribut nicht.link.disableddagegen setzt oder entfernt das Attribut. Ist das Attribut schon im HTML vorhanden, istlink.sheetnull, und Zugriffe wielink.sheet.disabledwerfen einenTypeError. - Nur für Stylesheets wirksam: Bei anderen
rel-Werten (z. B.preload,icon) hat die Eigenschaft keine sichtbare Wirkung. - Verzögertes Laden: Wird ein zu Beginn deaktiviertes Stylesheet aktiviert, lädt der Browser es erst dann. Das kann kurz ungestylte Inhalte oder Layoutsprünge verursachen. Abhilfe: die Datei vorher mit
<link rel="preload" as="style">vorladen oder auf dasload-Ereignis des Links warten. - Browser-Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt. Ältere Versionen haben sich unterschiedlich verhalten: Früher wurde die Eigenschaft nicht immer mit dem HTML-Attribut synchronisiert, und das Attribut im Quelltext wurde teils ignoriert. Wenn Sie ältere Browser unterstützen müssen, testen Sie gezielt.