Das styleSheet-Objekt

Zugriff auf die CSS-Regeln

► StyleSheets sind externe ( <link>-Elemente ) und interne (<style>-Elemente) Definitionen von CSS-Regeln.
► CSS-Regeln sind beliebig viele einzelne CSS-Eigenschaften, die zu einer CSS-Klasse zusammengefasst sind.
Es gibt Regeln, die gleichnamigen HTML-Elementen zugeordnet sind, und frei definierte CSS-Klassen, deren "Name" selectorText mit einem Punkt beginnt. 		Hier werden Methoden vorgestellt, um StyleSheets, CSS-Regeln und deren Eigenschaften zu lesen, zu schreiben, zu erzeugen und zu löschen.
Der Zugriff auf die CSS-Regeln erfolgt unabhängig davon, ob und wie oft sie auf einer Webseite angewendet werden.
DOM & Javascript Zugriff auf alle Elemente einer Webseite
CSS Cascading Style Sheets
style-Objekt Das style-Objekt von DOM-Knoten
styleSheet-Objekte Externe und interne Definitionen von CSS-Regeln
cssRules Die Regeln der styleSheets: cssRules
Eigenschaften Lesen Das Lesen der Eigenschaften von cssRules
Eigenschaften Schreiben Das Schreiben / Ändern der Eigenschaften von cssRules
Neue Regeln Neue Regeln erstellen, vorhandene überschreiben
Regeln löschen Vorhandene Regeln löschen
Property-Funktionen Alternative - leider ohne M$
Neue styleSheets Neue interne StyleSheets erstellen

StyleSheet-Objekte
Nachdem jeder Browser (mehr oder weniger) die Standard-DOM-Methoden unterstützt, wäre es angenehm, auch <style>-Elemente und (externe) StyleSheets als DOM-Knoten anzusprechen.
Das funktioniert zwar, allerdings sind die einzelnen Regeln darin leider nicht als childNodes enthalten.
Zur Handhabung der Styles werden eigene Objekte & Methoden verwendet. 		► Die Arbeit mit StyleSheet-Objekten betrifft das Layout von Dokumenten indirekt:
Damit werden die definierten CSS-Regeln bearbeitet, unabhängig davon, ob und wie oft sie angewendet werden.
► Alternativ bestehen verschiedene Möglichkeiten, mit den Attributen style und class einzelne DOM-Knoten ohne Änderung der allgemeinen StyleSheet-Regeln zu formatieren.
Demo:
Für den Live-Test enthält diese Webseite ein eigenes <style>-Element:
2 CSS-Regeln werden definiert: Eine Regel für p-Elemente (paragraph, Absatz) und die eigene CSS-Klasse xyz
<style type="text/css">
p{font-size:12pt; color:#123456;}
.xyz{font-size:14pt;}
</style>
Das StyleSheet-Objekt:
Die Menge aller StyleSheets ( <link>-Elemente ) und <style>-Elemente ist in allen Browsern als Objekt StyleSheets verfügbar.
length ergibt die Anzahl StyleSheets in einem document, die einzelnen StyleSheets werden mit Index (ähnlich wie in einem Array ) adressiert.

Beispiel: Das Demo-StyleSheet wird der Variablen test_css zugewiesen und in den folgenden Beispielen verwendet.

Live--Test: Anzahl der StyleSheets dieser Webseite
ss = document.styleSheets;
ssl = ss.length;
t = "Die Webseite enthaelt ";
t += ssl + " StyleSheets";
alert(t);

// Adressierung einzelner StyleSheets
ss_0 = ss[0]; // das 1. StyleSheet
ss_1 = ss[1]; // das 2. StyleSheet
test_css = document.styleSheets[0];

Regeln cssRules

Jedes styleSheet-Objekt enthält eine beliebige Anzahl von Regeln (cssRules).

M$IE verwendet leider nicht den W3C-Standard, sondern rules
Die unabhängige Funktion get_cssrules wird daher nachfolgend in allen StyleSheet-Beispielen verwendet.
Die Anzahl ssrl der Regeln entspricht der Anzahl der im jeweiligen StyleSheet definierten Styles (HTML-Styles + eigene styles)

length ergibt die Anzahl cssRules in einem styleSheet, die einzelnen cssRules werden mit Index (wie Array) adressiert.

Live--Test: Anzahl der Regeln des Test-styleSheets
function get_cssrules(ss) {
var ssr = ss.cssRules;
if(!ssr) { ssr=ss.rules; }
return ssr;
}

ssr = get_cssrules(test_css);
ssrl = ssr.length;
alert("Anzahl CSS-Regeln = "+ssrl);
Adressierung einzelner Regeln:
Voraussetzung: StyleSheet ist adressiert.
Zum Ansprechen der einzelnen Regeln kann man den fortlaufenden Index verwenden.
Anschaulicher ist es, den selectorText anzusprechen, das ist der "Name" der Regel: Bei HTML-Klassen identisch mit dem tag-Namen, bei eigenen Klassen der CSS-Klassen-Name mit dem Punkt. So können sie eine bestimmte cssRule zur Bearbeitung herausfiltern, ohne ihre Position zu kennen.

Live--Test: selectorText der Regeln des Test-styleSheet
regel_0 = ssr[0]; // erste cssRule
regel_0 = ssr[1]; // zweite cssRule
// selectorText:
var ssr = get_cssrules(test_ss);
var t = "Einzelne Regeln";
var st = "";
for(var i=0;i<ssr.length;i++) {
st=ssr[i].selectorText;
t+="\ncssRules["+i+"].selectorText="+st;
}
alert(t);

Lesen von CSS-Eigenschaften
Voraussetzung: styleSheet und cssRule sind adressiert.
Leider lassen sich nicht alle definierten Eigenschaften von CSS-Regeln (in einer Schleife) lesen.
Das Lesen ist nur für eine jeweils genau definierte CSS-Eigenschaft möglich (hier: color, font-size ).

Live--Test: Schriftfarbe von style[0]
Live--Test: Schriftfarbe von style[1]
Live--Test: Schriftgröße von style[1]
Nur tatsächlich festgelegte Eigenschaften werden angezeigt.
function get_cssprop(n,eig) {
var ssr=get_cssrules(test_ss);
var re = eval("ssr[n].style." + eig);
alert(eig+" = "+re);
}

Hinweis: Die Eigenschaft wird als String übergeben und kann daher nicht direkt in der Form ssr.style.eig eingesetzt werden. Der Javascript-Befehl wird daher zuerst mit Funktion eval zusammengestellt, dann erst ausgeführt.

Schreiben von CSS-Eigenschaften
Voraussetzung: styleSheet und cssRule sind adressiert.
Funktioniert analog zum Lesen.
Live--Test: Schriftfarbe von style[0]
Live--Test: Schriftfarbe von style[1]
Live--Test: Schriftgröße von style[1]
Live--Test: Hintergrundfarbe von style[1]

Hinweis: Nach dem Schreiben bereits definierter oder neuer CSS-Eigenschaften werden die geänderten Werte auch beim Lesen zurückgegeben.
ssr = get_cssrules(test_css);
ssr[n].style.color = "red";
ssr[n].style.fontSize = "8pt;";
ssr[n].style.backgroundColor = "yellow";
HTML:
<span class="xyz">Das ist</span>

<p>noch ein</p>

<div class="xyz">Mustertext</div>

Erstellen neuer CSS-Regeln
Erstellen neuer Regeln:
Die W3C-Standardfunktion dafür ist insertRule. Als Argument dient ein String mit einer oder mehreren CSS Definitions-Texten. Als weiteres Argument (Position am Ende der Regeln) dient die (bisherige) Anzahl der cssRules.
M$ verwendet leider eine eigene nicht standardisierte Funktion: addRule

Voraussetzung für beide Methoden ist ein adressiertes styleSheet. (hier: test_ss (s.o.) und newss (s.u.) )

Live--Test: der beiden Methoden: Zuerst werden die Standardmethoden verwendet, anschließend die M$-Variante. Beide Methoden sind in try-Elemente verpackt: Jeder gängige Browser kann eine der beiden Methoden ausführen, und ergibt bei der jeweils anderen eine Fehlermeldung.
// Standardfunktion
ir="p{font-weight:bold}";
test_ss.insertRule(ir,test_ss.cssRules.length);
ir="p{font-size:18pt;text-align:center}";
test_ss.insertRule(ir,test_ss.cssRules.length);
ir=".xyz{background-color:#AA00AA}";
test_ss.insertRule(ir,test_ss.cssRules.length);
ir=".xyz{color:#FF8}";
test_ss.insertRule(ir,test_ss.cssRules.length);
// M$ Variante
newss.addRule("p","font-weight:bold");
newss.addRule("p","font-size:18pt");
newss.addRule("p","text-align:center");
newss.addRule(".xyz","background-color:#AA00AA");
newss.addRule(".xyz","color:#FF8");

Löschen von Regeln
Löschen von Regeln:
Die W3C.Standardfunktion dafür ist deleteRule
M$ verwendet leider eine andere nicht standardisierte Funktion removeRule
// Standardfunktion
test_ss.deleteRule(0);
test_ss.deleteRule(1);
// M$ Variante
test_ss.removeRule[0];
test_ss.removeRule[1];

Property-Funktionen
Eine Alternative zu einigen der oben vorgestellten Funktionen bieten diese Funktionen:
getPropertyValue, setProperty und removeProperty:
Sie haben den Vorteil, sowohl mit beliebigen DOM-Knoten (hier: node ) zu arbeiten als auch mit StyleSheets (hier: test_css ).

Unterstützung derzeit nur durch Gecko (Firefox & Co) & Opera Browser.
node = document.getElementById("t2");
test_css = document.styleSheets[0];
test_rule = test_css.cssRules[0];

node.style.getPropertyValue('color')
test_rule.style.getPropertyValue('color')

node.style.setProperty('color','#00F',null)
test_rule.style.setProperty('color','#00F',null)

node.style.removeProperty('color')
test_rule.style.removeProperty('color')

Erstellen neuer StyleSheets
Erstellen neuer CSS-StyleSheets:
Standardfunktion createStyleSheet
// Alle modernen Browser
newss = document.createStyleSheet();

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   Javascript   >   JS & DOM     (CSS)