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 :

< p > Photos

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

( elemRef ) {

//souris est sur l'élément

document.getElementById ( elemRef ) className = " plus " ; }

fonction offElement

( elemRef ) {

//souris est éteint l'élément

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 :