Zusammenfassung
		Name:	add Style
		Aufgabe:	Ermöglicht das Hinzufügen von Stylesheets zum Dokument und von Regeln zum Stylesheet.
		Benötigt:	JavaScript 1.5 (gesichert, nicht gesichert für JavaScript 1.0)
		Beispiel:	addStyle("body { color: red; }") addStyle("body { color: red; }",1) addStyle("body { color: red; }","screen") Testseite
		Download:	addstyle.zip

Eine Funktion, mit der man browserunabhängig ein Stylesheet seines Dokuments ändert, habe ich mit cssRule() bereits veröffentlicht. Das funktioniert logischerweise nur, wenn es bereits ein Stylesheet mit einer CSS-Regel gibt, die man ändern kann.

Aber natürlich bieten die DHTML-fähigen Browser auch JavaScript-Methoden an, um dynamisch neue Stylesheets, bzw. neue Regeln in diesen anzulegen. Aber leider, wer hätte das gedacht >;-), unterscheiden sich die Methoden vom Internet Explorer und dem Rest der Welt. In einzelnen sind hierfür gedacht:

• createElement() um HTML-Elemente im Allgemeinen und eben auch STYLE-Elemente im Besonderen anzulegen (die dann z.B. mit appendChild() im Dokumenten-Baum hinzugefügt werden).
• addRule() im IE-DOM, bzw. insertRule() im W3C-DOM, um in einem existierenden Stylesheet eine neue Regel zu ergänzen.

Soweit die einfache Theorie, was sagt aber die mal wieder problematische Praxis? Die sagt, daß z.B. bei dieser offiziellen Vorgehensweise Browser mit der KHTML-Engine leider einen Bug haben können, oder daß im IE mit createElement() erstellte Stylesheets nicht sofort zur Verfügung stehen (der IE "bevorzugt" sein proprietäres createStyleSheet()), oder ...
Aber kein Problem: Aus Sicht des DOM ist der Inhalt eines STYLE-Elements, also die CSS-Regeln selbst, ja ohnehin nur ein simpler Textknoten. Warum also nicht einfach createTextNode() verwenden? Das klappt auch super - außer im Internet Explorer. Der IE besteht auf seinem addRule(). Also doch Anlaß genug, das unterschiedliche Browserverhalten durch eine optimierte Funktion zu vereinheitlichen.

Der Funktionsaufruf:

addStyle([rules[,target]])

Der 1. (optionale) Parameter rules ist ein String mit einer oder mehreren neuen CSS-Regeln in der Form selector { property:value; }, also z.B.: body { color: black; background-color: red; } div { border: 1px solid black; }

Achtung: Da der IE bei dynamischen Styles den Umgang mit gruppierten Selektoren prinzipiell nicht beherrscht, teilt addStyle() im IE gruppierte Selektoren in ihre Einzelselektoren auf! Aus z.B. html, body { font-size: 120%; } wird also im IE html { font-size: 120%; } body { font-size: 120%; }! Die anderen Browser haben hingegen tatsächlich einen gruppierten Selektor (natürlich mit all den Unterschieden, die diese Browser dann dennoch hier machen - s. auch cssRule()).

Der 2. (optionale) Parameter target bestimmt das zu ergänzende Stylesheet. Mögliche Werte für target sind:

• Eine Zahl, die die Nummer des zu ergänzenden STYLE-Elements definiert (0 für das erste STYLE-Element, 1 für das zweite, usw. Die neuen Regeln werden dann diesem Stylesheet hinzugefügt. Bei negativen Zahlen, wird von hinten gezählt (-1 für das letzte STYLE-Element, -2 für das vorletzte, usw.). Wird zu der übergebenen Zahl kein passendes STYLE-Element gefunden, so wird das am nächstenliegende, also das erste oder das letzte STYLE-Element ergänzt.
• Ein String mit einer Medientyp-Angabe (screen, print, etc.). Es wird eine neues STYLE-Element für diesen Medientyp erzeugt.
• Wird kein target-Parameter übergeben, so wird ein neues, allgemeines Stylesheet angelegt (also gültig für alle Medien).

Die Funktion gibt als Ergebnis das Objekt des erzeugten bzw. bearbeiteten STYLE-Elements zurück, oder null falls die Aktion nicht durchgeführt werden konnte.

Beispiele:

• addStyle("body { font-size: 120%; }",0); fügt am Ende des 1. STYLE-Elements die angegebene Regel ein, bzw. erstellt ein neues Stylesheet, falls es nicht existiert.
• alert(addStyle("body { font-size: 120%; }",0).innerHTML); dito, jedoch wird anschließend der Inhalt des (ergänzten oder neuen) STYLE-Elements in einer Alert-Box ausgegeben.
• addStyle("body { font-size: 120%; }","print"); fügt ein neues Drucker-Stylesheet mit der Regel ein.
• addStyle("body { font-size: 120%; } p { text-align: justify; }"); fügt ein neues Stylesheet mit 2 Regeln ein (gültig für alle Medien).
• addStyle(); fügt ein neues, leeres Stylesheet ein (gültig für alle Medien).
  
  Achtung: Leere Stylesheets werden beim Safari & Konqueror ggf. nicht in die styleSheets-Collection aufgenommen!
• addStyle("body { font-size: 120%; }",9999); fügt im letzten STYLE-Element die angegebene Regel ein, davon ausgehend, daß es nicht mehr als 10000 STYLE-Elemente gibt. ;-)
• addStyle("body { font-size: 120%; }",-1); fügt im letzten STYLE-Element die angegebene Regel ein, selbst falls es mehr als 10000 STYLE-Elemente geben sollte. ;-))
• if(!cssRule("body@print","font-size","12pt")) { addStyle("body { font-size: 12pt; }","print"); } ändert mittels cssRule() im Drucker-Stylesheet die Textgröße des Elements BODY auf 12pt, oder erstellt ein neues Drucker-Stylesheet mit dieser Regel, falls keine existierende Regel geändert werden konnte. Für diesen Zweck steht auch die Funktion setCssStyle() zur Verfügung:

/* 'Stil via Stylesheet setzen 280907' - Kombination aus http://Coding.binon.net/cssRule & http://Coding.binon.net/addStyle
 InlineFunc: cssRule(), addStyle()
 Rueckgabe : Bei Erfolg (Regel konnte aktiviert werden) true, sonst false
 Beispiele : setCssStyle("body","font-size","12pt","print");
             -> sucht die Regel mit dem Selektor "body" in einem Druckerstylesheet und setzt dort die Fontgroesse auf "12pt";
                wird keine passende Regel gefunden, wird ein neues Druckerstylesheet mit der Regel "body { font-size:12pt; }" erstellt.
             setCssStyle("body","font-size","2em !important","");
             -> sucht die Regel mit dem Selektor "body" in einem allg. Stylesheet (ohne Medienangabe) und setzt dort die Fontgroesse auf "2em !important";
                wird keine passende Regel gefunden, wird ein neues allg. Stylesheet mit der Regel "body { font-size:2em !important; }" erstellt.
             setCssStyle(".hidden","visibility","visible");
             -> sucht die Regel mit dem Selektor ".hidden" in allen Stylesheets und setzt dort den Wert der visibility-Eigenschaft auf "visible";
                wird keine passende Regel gefunden, wird ein neues allg. Stylesheet mit der Regel ".hidden { visibility:visible; }" erstellt.
             setCssStyle(".hidden","display","");
             -> sucht die Regel mit dem Selektor ".hidden" in allen Stylesheets und loescht dort den Wert der display-Eigenschaft.
*/
function setCssStyle(selector,attribute,value,media) {
 var result;

 // Default-Wert fuer value definieren
 if(typeof(value)=="undefined") { value=""; }

 // Wenn kein media-Parameter uebergeben wurde: Alle Stylesheets beachten 
 // (Leerer media-Parameter: Nur Stylesheets ohne Medienangabe beachten)
 if(typeof(media)=="undefined") { media="*"; }
 
 // cssRule() aufrufen (bestehende Stylesheets nach Selektor durchsuchen)
 result=cssRule(selector+"@"+media,attribute,value);
 // Bei Misserfolg und vorhandenem value: addStyle() aufrufen (neues Stylesheet anlegen)
 if(!result && value) { result=addStyle(selector+" { "+attribute+":"+value+"; }",(!media || media=="*")?"":media); }

 return (result)?true:false;
}