Einführung in die Verwendung von CSS expression_CSS/HTML

IE5 und spätere Versionen unterstützen die Verwendung von Ausdruck in CSS, um CSS-Attribute mit Javascript-Ausdrücken zu verknüpfen. Die CSS-Attribute können hier inhärente Attribute des Elements oder benutzerdefinierte Attribute sein.

Auf das CSS-Attribut kann ein Javascript-Ausdruck folgen, und der Wert des CSS-Attributs entspricht dem Ergebnis der Berechnung des Javascript-Ausdrucks. ?Sie können im Ausdruck direkt auf die Eigenschaften und Methoden des Elements selbst verweisen oder andere Browserobjekte verwenden. Der Ausdruck ist so, als ob er innerhalb einer Mitgliedsfunktion dieses Elements wäre.

Weisen Sie den inhärenten Attributen von Elementen Werte zu

Sie können beispielsweise ein Element basierend auf der Größe des Browsers positionieren.

#myDiv?{
position:?absolute;
width:?100px;
height:?100px;
left:?expression(document.body.offsetWidth?-?110?+ ?"px");
top:?expression(document.body.offsetHeight?-?110?+?"px");
background:?red;
}

Weisen Sie benutzerdefinierten Attributen von Elementen Werte zu

Entfernen Sie beispielsweise das gestrichelte Linkfeld auf der Seite. ?Der übliche Ansatz ist:

link1
link2
link3?

Auf den ersten Blick sind die Vorteile der Verwendung von Ausdrucken vielleicht nicht offensichtlich, aber wenn es Dutzende oder sogar Hunderte von Links auf Ihrer Seite gibt, werden Sie dann trotzdem Strg+C und Strg+V mechanisch verwenden? , welches generiert mehr redundanten Code?

Die Methode zur Verwendung des Ausdrucks ist wie folgt:?

a?{star?:?expression(onfocus=this.blur)}

link1
link2
?

Erläuterung: Der Stern darin ist ein von Ihnen selbst definiertes Attribut. Dann ist die in expression() enthaltene Anweisung das JS-Skript Ein Anführungszeichen, da das Wesentliche immer noch CSS ist, wird es daher im Style-Tag anstelle des s?script platziert. OK, das macht es einfach, den gepunkteten Link-Kästchen auf der Seite in einem Satz zu entfernen. Aber seien Sie nicht selbstgefällig, wenn der ausgelöste Spezialeffekt eine CSS-Attributänderung ist, wird das Ergebnis von Ihrer ursprünglichen Absicht abweichen. Wenn Sie beispielsweise die Farbe des Textfelds auf der Seite ändern möchten, während Sie die Maus hinein- und herausbewegen, denken Sie vielleicht natürlich, dass es als ?

geschrieben werden sollte

input?
{star?:?expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this .style.backgroundColor="#FFFFFF")}


input?{star?:?expression(onmouseover=this .style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}

Das Ergebnis ist jedoch ein Skriptfehler. Der richtige Weg, ihn zu schreiben, besteht darin, die Definition des CSS-Stils wie unten gezeigt in die Funktion zu schreiben:

input?{star?:?expression(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"})?}



?

Achtung

Es ist nicht unbedingt erforderlich, Expression zu verwenden, da Expression relativ hohe Browserressourcen erfordert.