Javascript styleSheets

Javascript insertRule removeRule

styleSheets 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.

Der Einsatz von CSS-Regeln und die CSS-Syntax sind einfacher, stabiler und weniger fehleranfällig.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Mit Javascript styleSheets auf CSS-Dateien und Style-Element zugreifen

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 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;
▾ StyleSheetList
▸ 0: CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, insertRule: function, deleteRule: function, …}
▸ 1: CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, insertRule: function, deleteRule: function, …}
▸ 2: CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, insertRule: function, deleteRule: function, …}

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

let rules = document.styleSheets[0].cssRules;
▾ CSSRuleList
▸ 0: CSSFontFaceRule {style: CSSStyleDeclaration, type: 5, cssText: "@font-face { font-family: Roboto; font-style: norm…in/roboto-v18-latin-regular.woff) format(woff); }", parentStyleSheet: CSSStyleSheet, parentRule: null, …}
▸ 1: CSSFontFaceRule {style: CSSStyleDeclaration, type: 5, cssText: "@font-face { font-family: Roboto; font-style: norm…-latin/roboto-v18-latin-300.woff) format(woff); }", parentStyleSheet: CSSStyleSheet, parentRule: null, …}
▸ 2: CSSStyleRule {selectorText: "body", style: CSSStyleDeclaration, type: 1, cssText: "body { padding: 0px; margin: 0px; line-height: 1.4…t-family: Roboto, sans-serif; font-weight: 300; }", parentStyleSheet: CSSStyleSheet, …}


		

styleSheets auflisten

sheets[0] ist das erste styleSheet im Dokument, das durch ein link- oder style-Element eingebunden ist. sheets.length ist die Anzahl der styleSheets.

    insertRule

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

    Gegenüber CSS im style-Attribut von HTML-Elementen setzt ein dynamisches insertRule auch gleich Breakpoints und verzweigt das CSS im style-Tag mit der @supports-Regel.

    stylesheets.insertRule("ul { height: 0; overflow:hidden; transition: height 1s; }", 9 );
    stylesheets.insertRule(".toggle { height: " + tallest + "px; overflow:visible; }" );
    stylesheets.insertRule("@media only screen and (max-width:1260px) { .accordion { max-width:480px } }");
    

    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.

    • Liquorice wafer lollipop sesame
    • snaps gummi bears. Wafer jelly beans chupa chups cotton candy
    • caramels carrot cake topping oat cake.
    • Cake carrot cake marshmallow cheesecake cake lemon drops pudding apple pie.

    Fruitcake marshmallow sugar plum soufflé biscuit.

    Sesame snaps pie lemon drops.

    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 kann einzelne Stylesheets deaktivieren. 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" />
    
    var sheets = document.styleSheets;
    for (const item of sheets) {
       if (item.title && item.title == 'extra') {
          item.disabled = true;
       }
    }
    

    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.