Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 20
Zur Übersicht

20. CSS-Variation im IE mit der Methode createStyleSheet() (24.12.1999)

Im Tipp 18 wird das dynamische Laden von CSS-Files mittels der LINK-Anweisung behandelt. Eine weitere, wenig bekannte Möglichkeit existiert für den Internet Explorer. Die Methode createStyleSheet() des document-Objektes erlaubt das Verändern einzelner Tag-Styles sowie das Laden von externen CSS-Dateien in ein Dokument.

Variante 1: Mittels document.createStyleSheet() wird die neue CSS-Definition eröffnet. Anschliessend werden durch die Methode addRule() die gewünschten Eigenschaften erzeugt. Als Argumente werden jeweils der Selektor und die Eigenschaft – durch ein Komma getrennt – erwartet. 
      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--

      function NeuesCSS1(vordergrund,hintergrund)
      {
      var CSS1;
      if (document.all)
      {
      CSS1=document.createStyleSheet();
      CSS1.addRule("H1","Color: "+vordergrund);
      CSS1.addRule("H1","Background-Color: "+hintergrund);
      CSS1.addRule("H1","Font-Family: Verdana, Arial, Helvetica");
      CSS1.addRule("H1","Text-Align: center");
      }
      }

      //-->
      </SCRIPT>
Variante 2: Der Methode create.StyleSheet() wird ein externes CSS-File übergeben. 
      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--

      function NeuesCSS2(filename)
      {
      if (document.all)
      {
      document.createStyleSheet(filename);
      }
      }

      //-->
      </SCRIPT>
Im Beispiel 20 werden beide Varianten demonstriert. Die Vorder- und Hintergrundfarben eines in <H1>...</H1>-Tags eingeschlossenen Textes lassen sich über Schaltflächen austauschen.