Comment faire pour modifier un attribut de classe CSS avec JavaScript
Modification de l' attribut class d'un élément HTML en utilisant JavaScript permet aux développeurs de créer des effets interactifs au sein de sites Web. Utilisation d'une fonction JavaScript , vous pouvez déterminer quel comportement doit avoir lieu lorsque les utilisateurs interagissent avec vos éléments de page , modifier leurs propriétés de style CSS en réponse à cette interaction. Modification des noms d'attribut de classe est l'une des techniques clés impliqués dans cette tâche , ce qui est réalisable , même pour les personnes débutant dans le développement Web . Instructions 1
Créez votre page HTML avec les éléments pour afficher le contenu . Ouvrez un nouveau fichier dans un éditeur de texte et enregistrez-le "html ". Que l'extension , en entrant le code suivant :
Photos
Bonjour
Photos
< br >
Photos
Cela crée simplement une page Web avec un seul élément HTML en elle. L'élément a été attribué un attribut de classe avec le nom «off». Ceci indique l'état de l'élément lorsque l'utilisateur n'a pas son curseur de la souris dessus . 2
Créer votre code CSS . Ouvrez un nouveau fichier dans un éditeur de texte et l'enregistrer comme " interactivestyle.css » afin de refléter le but de la tâche en cours. Entrez le code suivant :
off {
color: # FF0000 ; }
sur {
color: # 0000FF ;} . .
Ajouter un lien vers votre fichier CSS dans la section head de votre page HTML, entre l'ouverture et la fermeture des balises head :
3
créer deux fonctions JavaScript dans la section head de votre page, que ce soit avant ou après le lien vers votre fichier CSS:
Photos
Votre page va modifier l' style de l'élément lorsque l'utilisateur déplace sa souris sur et en dehors. Une fonction distincte est nécessaire de traiter chacun de ces événements utilisateur. 4
Situer les éléments dans vos fonctions JavaScript et changer leurs attributs de nom de classe. Alter vos deux fonctions JavaScript comme suit: . Fonction overElement
document.getElementById ( elemRef ) className = ". off " ;
}
Ce code dans chaque fonction localise d'abord l'élément en question en utilisant son attribut ID qui a été passé en paramètre , puis modifie le nom de la classe en conséquence < . br> 5
appeler vos fonctions au sein de votre contenu HTML. Votre page doit «écouter » pour l'interaction de l'utilisateur , en appelant les fonctions JavaScript lorsque cela se produit . Alter votre élément HTML comme suit :
Bonjour < /div> Photos
Cela affecte un attribut ID de l'élément , en passant à chaque fonction lorsque l'utilisateur déplace sa souris sur ou hors de la zone . Enregistrez vos fichiers et ouvrez la page HTML dans un navigateur Web , déplaçant votre souris sur et en dehors de l'élément à tester la fonctionnalité .
