Tutoriel CSS (8) Une brève introduction à l'utilisation de CSS combiné avec JS

8. Présentez brièvement l'utilisation de CSS combiné avec JS (pour les actions événementielles)

L'utilisation de CSS avec javascript peut créer de nombreux effets de page dynamiques plus sympas. , je vais vous donner une brève introduction à l'application de CSS et JS. Tout d’abord, nous devons comprendre les concepts d’événements et d’actions. Dans les scripts côté client, javascript obtient une interaction avec l'utilisateur en répondant aux événements. Par exemple, lorsque l'utilisateur clique sur un bouton ou déplace la souris sur un certain texte, un événement de clic ou de mouvement de la souris est déclenché. En répondant à ces événements, des fonctions spécifiques peuvent être exécutées (par exemple, cliquer sur un bouton pour faire apparaître un message). boîte de dialogue, le texte change de couleur après le passage de la souris, etc.). Voici plusieurs événements courants (il y a d'autres événements, veuillez vérifier les informations pertinentes) :

onClick : événement de clic de souris. (Cela se produit lorsque la souris est enfoncée puis relâchée.)

onDblClick : événement de double-clic de la souris. (Fait référence au moment où la souris est pressée rapidement, relâchée et pressée à nouveau.)

onMouseDown : événement Mouse Down. (Se produit lorsque la souris est enfoncée.)

onMouseUp : événement de libération de la souris. (Fait référence à la souris de l'état enfoncé à l'état rebondi.)

onMouseMove : événement de déplacement de la souris. (Fait référence au déplacement de la souris sur un élément spécifique.) onMouseOver : événement survolé par la souris. (Cela signifie que cela se produit lorsque le pointeur se déplace du monde extérieur vers l'élément.)

onMouseOut : La souris quitte l'événement. (Se produit lorsque la souris quitte un élément spécifique.)

onLoad : événement de chargement. (Se produit lorsque le chargement de l'image ou de la page est terminé.)

onUnload : événement de déchargement. (Se produit lorsqu'un visiteur quitte la page.)

onScroll : événement de défilement de la barre de défilement. (Se produit lorsqu'un visiteur utilise le parchemin pour monter ou descendre.)

Après avoir organisé l'événement, nous ajoutons des actions à l'événement. Ici, nous parlons uniquement de l'action de changer le style personnalisé de l'élément actuel. Nous pouvons d'abord utiliser cette méthode pour définir deux styles CSS personnalisés. L'objet appelle à l'origine le premier style, et lorsqu'un événement de souris se produit, l'objet est appliqué. le deuxième style CSS et l'effet de souris produit, voir l'exemple ci-dessous.

Insérez une image dans la page Web, personnalisez un style ".out" et utilisez le filtre gris pour rendre l'image en noir et blanc :

Appliquez ce style personnalisé à l'image, lorsque en prévisualisant l'image dans le navigateur, elle devient noir et blanc. Nous définissons un autre style ".over". Ce style n'a pas de contenu et est un style vide est le suivant :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!