Javascript: CSS ändern mit styleSheets und insertRule

Mit Javascript styleSheets auf CSS-Dateien und Regeln zugreifen

styleSheet gibt eine Liste der CSS-Dateien und style-Elemente im Seitenkopf zurück. insertRule und removeRule fügen neue CSS-Stile in ein Stylesheet ein und entfernen sie wieder. Das Verfahren ist übersichtlicher als das wiederholte Einfügen langer Strings mit style-Attributen.

document.styleSheets gibt eine aufklappbare Liste der Stylesheets der Seite zurück. Das styleSheets-Objekt enthält alle Stylesheets der Seite – sowohl Styleheets, die mit <style> notiert sind als auch diejenigen, die als externe CSS-Datei mit <link rel="stylesheet"> eingebunden sind.

Der Rückgabewert von document.styleSheets sieht aus wie ein Array, ist aber eine nodeList. Der Zugriff erfolgt über den Index.

const sheets = document.styleSheets;

for (const item of sheets ) {
	console.log (item)
}

▸ CSSStyleSheet
▸ CSSStyleSheet
▸ CSSStyleSheet

▾ CSSStyleSheet
 ▾ cssRules: CSSRuleList
 ▸ 0:CSSSupportsRule {conditionText: '( display: flex )', cssRules: CSSRuleList, type: 12, cssText: '@supports ( display: flex ) {\n  @media only screen…und-color: rgb(235, 245, 255); height: 4em; }\n}\n}', parentRule: null, …}
 ▸ 1:CSSStyleRule {selectorText: '.skip-link', style: CSSStyleDeclaration, styleMap: StylePropertyMap, type: 1, cssText: '.skip-link { display: none; }', …}
 ▸ 2:CSSStyleRule {selectorText: 'html', style: CSSStyleDeclaration, styleMap: StylePropertyMap, type: 1, cssText: 'html { scroll-behavior: smooth; }', …}
 ▸ 4:CSSMediaRule {media: MediaList, conditionText: 'only screen', cssRules: CSSRuleList, type: 4, cssText: '@media only screen {\n  body { font-family: -apple-…3); color: rgb(85, 85, 85); font-weight: 300; }\n}', …}
 …
▸ CSSStyleSheet
▸ CSSStyleSheet

Eine Array-Notation gibt direkten Zugriff auf die Elemente der Liste.

const rules = document.styleSheets[0].cssRules;

• ❌ insertRule() ist nicht empfehlenswert für einfache CSS-Änderungen. classList.add() oder element.style sind effektiver und besser lesbar.
• ✅ Sinnvoll ist insertRule() nur für Performance-optimierte CSS-Änderungen, die sehr viele Elemente betreffen.

insertRule

Stylesheets haben eine Methode insertRule, die CSS-Regeln auf dieselbe Weise einfügt wie die Notation in der CSS-Datei oder in style-Elementen im Kopf der Seite.

Gegenüber CSS im style-Attribut von HTML-Elementen oder elem.style.cssText setzt insertRule auch Breakpoints und verzweigt das CSS im style-Tag mit der @supports-Regel. Die Notation ist dieselbe wie im CSS – gut lesbar und nachvollziehbar.

sheets[0].insertRule (`
@supports ( display: flex ) {
	@media only screen and (max-width:1260px) { 
		h2 { 
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #EBF5FF;
			height: ${foo}em;
		 } 
	}
}
`);

Per Vorgabe werden neue Regeln am Ende des Stylesheets eingefügt. Das optionale zweite Argument ist der Index, an dem die Regel eingefügt wird. Dieser Index darf nicht größer sein als die Zahl der Regeln im Style-Element und reagiert ausgesprochen sensibel, wenn der Index außer Kontrolle gerät. In älteren Implementierungen war der Index noch erforderlich

IndexSizeError: DOM Exception 1: Index or size was negative, or greater than the allowed value.

styleSheets identifizieren

Das styleSheet-Objekt unterstützt nur den Zugriff durch den Index, also über die Position des styleSheets im Dokument. Zur Identifikation kann aber auch die href-Eigenschaft herangezogen werden, wenn das Stylesheet durch ein <link>-Tag in das Dokument eingebunden wurde oder das title-Attribut (sofern title gesetzt ist und die title-Attribute eindeutig sind).

function getStyleSheet(unique_title) {
	for (const item of document.styleSheets) {
		if (item.title == unique_title) {
			return item;
		}
	}
}

Quelle Dynamic style - manipulating CSS with JavaScript auf www.w3.org

Ein gleichlautendes title-Attribut erlaubt das Zusammenfassen von zwei oder mehr Style Sheets zu einer Gruppe, die gemeinsam außer Kraft gesetzt oder deaktiviert werden können.

Stylesheet mit Javascript erzeugen

Statt Blöcke immer wieder mit elem.style oder setAttribute() und removeAttribute() zu ändern, initialisiert ein dynamisch erzeugtes StyleSheet alle Blöcke.

Zuerst: Die maximale Höhe des Accordion-Elements berechnen, damit der Inhalt, der dem Accordion folgt, beim Öffnen und Schließen der Stufen nicht auf- und abtanzt.

const acco = document.querySelectorAll (".accordion>div");
let maxHeight = 0;

for (const item of acco) {
	if (item.clientHeight > maxHeight) {
		maxHeight = item.clientHeight;
	}
}

const style = getStyleSheet ("accordion");
style.insertRule (`
	.wrap { 
		height: ${maxHeight + labelTotal}px }
	`);

stylesheets disabled

Die Liste kann nicht geändert werden, aber disabled deaktiviert einzelne Stylesheets. disabled ist ein boole'scher Wert und gibt an, ob ein styleSheet in Kraft ist (disabled = false) oder nicht. Default ist false.

<link rel="stylesheet" href="dom-stylesheets.css" title="extra" />

const sheets = document.styleSheets;
for (const item of sheets) {
   if (item.title && item.title == 'extra') {
      item.disabled = true;
   }
}

Mal diese Seite ohne die CSS-Datei? Aber Achtung! Kann zu leichten bis schweren Erschütterungen der CSS-Macht führen (Wiederherstellen der CSS-Macht mit Reload).

Weitere Eigenschaften von styleSheets

ownerNode

gibt einen Verweis auf den Knoten zurück, der das aktuelle styleSheet enthält. Gibt in regulären HTML-Seiten i.d.R. ein LINK- oder STYLE-Element zurück. In XML-Dokumenten kann dies die linkende ProcessingInstruction sein.

parentStyleSheet

Verweis auf das Top-Level-Stylesheet bei Style Sheets, die durch die @page-Regel eingebunden sind. Bei Style Sheets, die durch LINK- oder STYLE eingebunden sind, wird null zurückgegeben.

media

Gibt das media-Objekt des styleSheets als Liste zurück. Die Eigenschaft mediaText gibt den Medientyp als String zurück. Default ist screen.