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 41
Zur Übersicht

41. CSS-Klassen austauschen (IE / NN 6 / Mozilla) (15.11.2000)

Der dynamsiche Austausch von CSS-Klassen gehört zu den ebenso einfachen wie genialen Techniken, die im IE bereits seit Version 4 verfügbar sind. Man benötigt nur wenige Codezeilen, um HTML-Elementen einen Satz neuer Eigenschaften zuzuweisen. Das folgende Script ermöglicht das Ersetzen einer Klasse klasse1 durch eine Klasse klasse2, unabhängig vom jeweiligen HTML-Element. Hilfreich ist dieses Verfahren, wenn z. B. alle Absätze oder alle Tabellenzellen eines Dokuments in Abhängigkeit von bestimmten Browser-Ereignissen neue CSS-Eigenschaftswerte erhalten sollen.

Die Script-technische Realisierung basiert im IE auf der Abfrage der jeweils aktuellen Klassendefinition über die document.all-Collection bzw. document.getElementsByTagName("*") in Netscape 6 / Mozilla. Wird eine bestimmte Klasse gefunden, erfolgt die Ersetzung durch einen anderen Klassennamen, welcher durch entsprechende Definitionen im zugrunde liegenden CSS verfügbar sein muss.
Der Funktion NeueKlasse(vorher,nachher) brauchen nur noch die gewünschten Klassennamen übergeben werden. 

      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--

      function NeueKlasse(vorher,nachher)
      {
        if (document.all)
        {
          for (i=0;i<document.all.length;i++)
          {
            if (document.all[i].className==vorher)
            {
            document.all[i].className=nachher;
            }
          }
        }

        if (document.getElementById && !document.all)
        {
          var elemente=document.getElementsByTagName("*");
          for (i=0;i<elemente.length;i++)
          {
            if (elemente[i].className==vorher)
            {
            elemente[i].className=nachher;
            }
          }
        }
      }

      //-->
      </SCRIPT>
Im Bespiel 41 wird diese Funktion auf Absätze angewendet.

	<P CLASS="klasse1">Absatz 1</P>
	<P CLASS="klasse1">Absatz 2</P>
	<P CLASS="klasse1">Absatz 3</P>
	<FORM>
	<INPUT TYPE="button" VALUE="Klasse 1 --&gt; Klasse 2"
	  OnClick="NeueKlasse('klasse1','klasse2')">
	<INPUT TYPE="button" VALUE="Klasse 2 --&gt; Klasse 1"
	  OnClick="NeueKlasse('klasse2','klasse1')">
	</FORM>