Heim >Web-Frontend >Front-End-Fragen und Antworten >Was ist ein CSS-Ausdruck?

Was ist ein CSS-Ausdruck?

青灯夜游Original: 2021-07-06 16:37:573655Durchsuche

css-Ausdruck besteht darin, expression() nach dem CSS-Attribut zu verwenden, um einen JavaScript-Ausdruck zu verbinden. Der Wert des CSS-Attributs ist das Ergebnis des JavaScript-Ausdrucks; das Syntaxformat ist „CSS-Attribut: Ausdruck (JavaScript-Ausdruck);“.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3 und Javascript Version 1.8.5, Dell G3-Computer.

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

css-Ausdruck besteht darin, expression() nach dem CSS-Attribut zu verwenden, um einen JavaScript-Ausdruck zu verbinden. Der Wert des CSS-Attributs ist das Ergebnis des JavaScript-Ausdrucks.

Sie können im Ausdruck direkt auf die Eigenschaften und Methoden des Elements selbst verweisen oder andere Browserobjekte verwenden. Der Ausdruck erscheint so, als befände er sich innerhalb einer Mitgliedsfunktion dieses Elements.

Haben Sie das Gefühl, dass der obige Text etwas unklar ist? Es spielt keine Rolle, Sie müssen es nur wissen: Wir können Javascript-Skripte mithilfe von Ausdrücken in CSS-Dateien schreiben und damit einige sehr praktische Funktionen und Effekte erzielen.

Ausdrucksanwendung:

1. Weisen Sie den inhärenten Attributen von Elementen Werte zu. Das folgende Beispiel dient dazu, ein Element entsprechend der Größe des Browsers zu positionieren.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mid.lt263.com/mb</title>
<style type="text/css">
#myDiv {
position: absolute;
width: 100px;
height: 100px;
background:#c00;
left: expression(document.body.offsetWidth - 180   "px");
top: expression(document.body.offsetHeight - -80   "px");
text-align:center;
line-height:90px;
color:#fff;
}
</style>
</head>
<body>
<div id="myDiv">mb5u.com</div>
</body>
</html>

2. Weisen Sie dem benutzerdefinierten Attribut des Elements einen Wert zu. Schauen wir uns das folgende Beispiel an:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mid.lt263.com/mb</title>
<style type="text/css">
a {star:expression(this.onFocus=this.blur())}
</style>
</head>
<body>
<a href="#" _fcksavedurl="#">模板天下 - mid.lt263.com/mb
</p>
</body>
</html>

Erläuterung: Der darin enthaltene Stern ist ein von Ihnen beliebig definiertes Attribut und kann es dann einschließen in expression() Die Anweisung ist ein JS-Skript. Vergessen Sie nicht, dass zwischen dem benutzerdefinierten Attribut und dem Ausdruck ein Anführungszeichen steht. Da es sich immer noch um CSS handelt, wird es im Style-Tag und nicht im Skript platziert. Auf diese Weise ist es einfach, den gepunkteten Link-Kästchen auf der Seite in einem Satz zu entfernen. Was Ihre besondere Aufmerksamkeit erfordert: Sofern kein besonderer Bedarf an der Verwendung von Expression besteht, wird die Verwendung von Expression im Allgemeinen nicht empfohlen, da Expression relativ hohe Browserressourcen erfordert.

Hinweis:

CSS-Ausdrücke sind eine leistungsstarke (aber gefährliche) Möglichkeit, CSS-Eigenschaften dynamisch festzulegen. Internet Explorer unterstützt CSS-Ausdrücke ab Version 5. Im folgenden Beispiel kann ein CSS-Ausdruck verwendet werden, um die Hintergrundfarbe stündlich zu ändern:

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Wie oben gezeigt, wird in Ausdruck ein JavaScript-Ausdruck verwendet. CSS-Eigenschaften werden basierend auf der Auswertung von JavaScript-Ausdrücken festgelegt. Die Ausdrucksmethode funktioniert in anderen Browsern nicht, daher ist es sinnvoll, sie speziell für Internet Explorer in einem browserübergreifenden Design einzurichten.

Das Problem mit Ausdrücken ist, dass sie häufiger ausgewertet werden, als wir denken. Nicht nur, wenn die Seite angezeigt und gezoomt wird, sondern auch, wenn die Seite gescrollt wird und sogar wenn die Maus bewegt wird, wird sie neu berechnet. Fügen Sie einem CSS-Ausdruck einen Zähler hinzu, um zu verfolgen, wie oft der Ausdruck ausgewertet wird. Sie können problemlos mehr als 10.000 Berechnungen durchführen, indem Sie einfach die Maus über die Seite bewegen.

Eine Möglichkeit, die Häufigkeit der Auswertung eines CSS-Ausdrucks zu reduzieren, besteht darin, einen einmaligen Ausdruck zu verwenden, der das Ergebnis bei der ersten Ausführung einem angegebenen Stilattribut zuweist und dieses Attribut verwendet, um den CSS-Ausdruck zu ersetzen. Wenn sich Stileigenschaften während der Seitenzyklen dynamisch ändern müssen, ist die Verwendung von Ereignishandlern anstelle von CSS-Ausdrücken eine praktikable Option. Wenn Sie CSS-Ausdrücke verwenden müssen, denken Sie unbedingt daran, dass diese tausende Male ausgewertet werden und sich möglicherweise auf die Leistung Ihrer Seite auswirken.

(Teilen von Lernvideos:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonWas ist ein CSS-Ausdruck?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was bedeutet fcous in Javascript?Nächster Artikel：Was bedeutet fcous in Javascript?

In Verbindung stehende Artikel

Mehr sehen