Der Tipp 20 beschäftigt sich mit dem dynamischen Erzeugen von CSS-Regeln mittels der IE-Methode document.createStyleSheet(). Darüber hinaus kann man den Microsoft-Browsern ab Version 4 noch andere, vor allem bei Intranet-Anwendungen, nützliche Features zur CSS-Manipulation entlocken. In diesem Tipp wird die document.styleSheets-Collection verwendet. Über diese lassen sich die in ein HTML-Dokument geladenen Style Sheets referenzieren und mittels weiterer Methoden verändern.


1. Anzahl der Style Sheets:
document.styleSheets.length gibt die Anzahl der eingebundenen externen CSS zurück.


2. URL einer CSS-Datei:
document.styleSheets(index_ab_0).href enthält die Adresse der CSS-Dateien in der Reihenfolge ihres Auftretens im Dokument, wobei das erste Style Sheet den Index 0 besitzt. Intern deklarierte CSS lassen sich auf diese Weise ebenfalls auffinden, in diesen Fällen wird NULL zurück gegeben.


3. CSS hinzufügen:
Mit der Methode addImport("filename") können weitere Style Sheet-Definitionen zu im Dokument bereits existierenden CSS hinzugefügt werden.

      var index=... // Wert ab 0;
      if (document.styleSheets(index).href == "NULL")
      {
      document.styleSheets(index).addImport("abc.css");
      }
      

4. CSS ersetzen / löschen:
Bereits bestehende CSS lassen sich durch andere ersetzen. Durch die Übergabe einer leeren Zeichenkette "" wird das Style Sheet entfernt.

      var index=... // Wert ab 0;
      if (document.styleSheets(index).href != "NULL")
      {
      document.styleSheets(index).href="xyz.css"; // Ersetzen
      document.styleSheets(index).href=""; // Löschen
      }
      

5. CSS aktivieren / deaktivieren:
Die Eigenschaft disabled kann die Werte false bzw. true annehmen und somit bestimmte Style Sheets aktivieren oder deaktivieren.

      var index=... // Wert ab 0;
      document.styleSheets(index).disabled=false; // CSS ist aktiviert
      document.styleSheets(index).disabled=true; // CSS ist deaktiviert
      

6. Neue Regeln hinzufügen / entfernen:
Die addRule()-Methode erlaubt das Hinzufügen neuer CSS-Definitionen für bestimmte Elemente (Tags). Die korrespondierende removeRule()-Methode hebt die Definitionen wieder auf.

      var index=... // Wert ab 0;
      document.styleSheets(index).addRule("Tag","Eigenschaften");
      document.styleSheets(index).removeRule("Tag","Eigenschaften");
      

Im Beispiel 38 werden diese Techniken an in <SPAN>- bzw. <H3>-Tags eingeschlossenen Texten demonstriert.