Définition
L'attribut javascript className de l'objet Element du Document Object Model HTML (DOM HTML) permet de connaître et de modifier l'attributs CLASS d'une balise HTML ou XHTML.
Exemple de className
Changer la class sur un bouton
Cet exercice consiste à changer la couleur de fond d'un Input lorque la souris le survole.
Première étape :Nous définissons deux class css.
La première (btnormal) est assignée quand la souris est en dehors du bouton, la seconde (bthover) qui est assignée lorsque la souris est sur le bouton.
Code CSSExemple de code :
<style type="text/css"><!--
.btnormal{background-color:#CC0000;color:#FFFFFF;}
.bthover{background-color:#000099;color:#FFFFFF;}
--></style> Seconde étape :Nous créons une fonction javascript générique, qui assigne une class à un objet HTML ou XHTML.
Code JavascriptExemple de code :
<script type="text/javascript">
function setClass(objet,dmcNom){objet.className=dmcNom;}
/* Objet : Objet HTML ou XHTML
dmcClass : nom de la class à assigner à l'objet HTML
*/
</script> Troisième étape :Nous créons un Input Bouton et nous lui assignons deux événements.
onmouseover quand la souris rentre sur la zone du bouton et
onmouseout quand la souris sort de la zone du bouton.
Code HTMLExemple de code :
<form name="fdmc"><input name="Valider" type="button" value="Valider" class="btnormal" onmouseover="setClass(this,'bthover')" onmouseout="setClass(this,'btnormal')"/></form> Résultat:
Changer la class sur un block
Cet exercice consiste à changer la couleur de fond d'un élément HTML ou XHTML div lorque la souris le survole.
Première étape :Nous définissons trois class css.
La première (cdivtext) est assignée quand la souris est en dehors du block, la seconde (cdivtexthover) qui est assignée lorsque la souris est sur le block et la troisième (divtext) donne les propriétés générales à la balise HTML ou XHTML.
Code CSSExemple de code :
<style type="text/css"><!--
#divtext{display:block;width:150px;height:30px;border-color:#000000;border-style:solid;border-width:1px;padding:3px;}
.cdivtext{background-color:none;}
.cdivtexthover{background-color:#000099;}
--></style> Seconde étape :Nous créons une fonction javascript générique, qui assigne une class à un objet HTML ou XHTML.
Code JavascriptExemple de code :
<script type="text/javascript">
function setClass(objet,dmcNom){objet.className=dmcNom;}
/* Objet : Objet HTML ou XHTML
dmcClass : nom de la class à assigner à l'objet HTML
*/
</script> Troisième étape :Nous créons un block avec la balise div et nous lui assignons deux événements.
onmouseover quand la souris rentre sur la zone du block et
onmouseout quand la souris sort de la zone du block.
Code HTMLExemple de code :
<div id="divtext" class="cdivtext" onmouseover="setClass(this,'cdivtexthover')" onmouseout="setClass(this,'cdivtext')">Zone de Texte dans un div</div> Résultat:
Zone de Texte dans un div
Conclusion
Nous l'avantage de changer le nom de la class dynamiquement, va vous permettre de spécifier plusieurs changements d'aspect d'un élément en une seule fois.
Vous auriez pu changer en plus les bordures, la police...