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

37. Dynamische CSS-Eigenschaften mit der IE-Methode setExpression() (05.10.2000)

Die Veränderung von CSS-Eigenschaften über das Browser-Objektmodell (DOM) ist bekannt und wurde hier bereits mehrfach beschrieben. Eine weitere, bisher kaum bekannte, Möglichkeit zur dynamischen Anpassung von z. B. Längen- und Positionsangaben oder Farben bietet sich mit der im IE 5.x implementierten Methode setExpression() an.
Dabei wird gewissermaßen eine permanente Überwachung von CSS-Definitionen realisiert. Einem oder mehreren Objekt(en) können die Eigenschaftswerte anderer Objekte zugewiesen werden. Nach der Initialisierung werden keine weiteren Funktionsaufrufe nebst Event-Handlern mehr benötigt.

object1.style.setExpression("width","object2.style.height");

Dieser Beispielausdruck zeigt die Anwendung. Die Eigenschaft width des Objektes 1 wird mit der Eigenschaft height des Objektes 2 synchronisiert, d. h. ändert sich die Höhe des Objektes 2, wird die Breite des Objektes 1 auf diesen Wert gesetzt. Ganz analog funktioniert dieses Prinzip auch mit Farbwerten und beliebigen weiteren CSS-Eigenschaften.

Im Beispiel 37 werden die Eigenschaften Breite, Höhe, Position und Hintergrundfarbe eines DIVs mit der ID "kasten" über Texteingabefelder bzw. eine Select-Box dynamisch angepaßt. Der relevante Code befindet sich in der JavaScript-Funktion WerteSetzen(), die beim Laden des HTML-Dokuments einmalig aufgerufen wird (OnLoad). Danach sind keinerlei OnChange-Aufrufe nötig, um die geänderten Eigenschaftswerte zuzuweisen.

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

      function WerteSetzen()
      {
      if (document.all && document.getElementById)
      {
      document.all["kasten"].style.setExpression("width","document.eingabe.breite.value");
      document.all["kasten"].style.setExpression("height","document.eingabe.hoehe.value");
      document.all["kasten"].style.setExpression("top","document.eingabe.oben.value");
      document.all["kasten"].style.setExpression("left","document.eingabe.links.value");
      document.all["kasten"].style.setExpression("backgroundColor","document.eingabe.
        farbe.options[document.eingabe.farbe.options.selectedIndex].value");
      }
      }

      //-->
      </SCRIPT>