 |
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>
|
 |