CSS-Tutorial (8) Eine kurze Einführung in die Verwendung von CSS in Kombination mit JS

8. Stellen Sie in diesem Tutorial kurz die Verwendung von CSS in Kombination mit JS vor (für Ereignisaktionen).

Die Verwendung von CSS mit Javascript kann viele coolere dynamische Seiteneffekte erzeugen Ich werde Ihnen eine kurze Einführung in die Anwendung von CSS und JS geben. Zuerst müssen wir die Konzepte von Ereignissen und Aktionen verstehen. Beim clientseitigen Scripting erhält Javascript die Interaktion mit dem Benutzer, indem es auf Ereignisse reagiert. Wenn der Benutzer beispielsweise auf eine Schaltfläche klickt oder die Maus über einen bestimmten Text bewegt, wird ein Klickereignis oder Mausbewegungsereignis ausgelöst. Durch die Reaktion auf diese Ereignisse können bestimmte Funktionen ausgeführt werden (z. B. das Klicken auf eine Schaltfläche, um ein Popup-Fenster zu öffnen). (Dialogfeld, der Text ändert seine Farbe, nachdem die Maus darüber bewegt wird usw.). Hier sind einige häufige Ereignisse (es gibt noch mehr Ereignisse, bitte überprüfen Sie die relevanten Informationen):

onClick: Mausklick-Ereignis. (Bezieht sich darauf, wenn die Maus gedrückt und dann losgelassen wird.)

onDblClick: Maus-Doppelklick-Ereignis. (Bezieht sich darauf, wenn die Maus schnell gedrückt, losgelassen und erneut gedrückt wird.)

onMouseDown: Maus-Down-Ereignis. (Tritt auf, wenn die Maus gedrückt wird.)

onMouseUp: Mausfreigabeereignis. (Bezieht sich auf die Maus vom gedrückten Zustand in den zurückgesprungenen Zustand.)

onMouseMove: Mausbewegungsereignis. (Bezieht sich auf das Bewegen der Maus über ein bestimmtes Element.) onMouseOver: Mouse-Over-Ereignis. (Das bedeutet, dass es auftritt, wenn sich der Zeiger von der Außenwelt zum Element bewegt.)

onMouseOut: Die Maus verlässt das Ereignis. (Tritt auf, wenn die Maus ein bestimmtes Element verlässt.)

onLoad: Ladeereignis. (Tritt auf, wenn das Bild oder die Seite vollständig geladen wurde.)

onUnload: Entladeereignis. (Tritt auf, wenn ein Besucher die Seite verlässt.)

onScroll: Bildlaufereignis der Bildlaufleiste. (Tritt auf, wenn ein Besucher die Schriftrolle verwendet, um sich nach oben oder unten zu bewegen.)

Nachdem wir das Ereignis durchgeführt haben, fügen wir dem Ereignis Aktionen hinzu. Hier sprechen wir nur über die Aktion zum Ändern des benutzerdefinierten Stils des aktuellen Elements. Mit dieser Methode können wir zunächst zwei benutzerdefinierte CSS-Stile festlegen. Das Objekt ruft ursprünglich den ersten Stil auf und wird auf das Objekt angewendet Den zweiten CSS-Stil und den erzeugten Mauseffekt finden Sie im folgenden Beispiel.

Fügen Sie ein Bild in die Webseite ein, passen Sie einen „.out“-Stil an und verwenden Sie den Graufilter, um das Bild schwarzweiß zu machen:

Wenden Sie diesen benutzerdefinierten Stil auf das Bild an, wenn Wenn wir das Bild im Browser in der Vorschau anzeigen, wird es schwarzweiß. Dieser Stil hat keinen Inhalt und ist ein leerer Stil type="text" /css">





Dann fügen Sie „onMouseOver="this.className='over'" onMouseOut="this.className='out'"" zum Bild hinzu Tag (IMG): Wenn die Maus darüber bewegt wird, ist das Bild im Over-Stil, also ein normales Farbbild Bild. oMouseOver und onMouseOut sind Mausereignisse. this.className="..." bedeutet, dass der Klassenname des aktuellen Objekts ... ist. Achten Sie darauf, nicht die falsche Groß-/Kleinschreibung zu berücksichtigen.

Auf diese Weise ist der Effekt abgeschlossen. Nach dem Speichern und Öffnen im Browser wird das Bild schwarzweiß Das Bild wechselt wieder zu Schwarzweiß. Solange Sie Ihrer Fantasie freien Lauf lassen, können Sie mit der Methode this.className auch viele schöne Mauseffekte erstellen.

Das obige ist der detaillierte Inhalt vonCSS-Tutorial (8) Eine kurze Einführung in die Verwendung von CSS in Kombination mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!