Dom HTML : Objet Element.className

La propriété javascript className

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 CSS
Exemple 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 Javascript
Exemple 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 HTML
Exemple 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 CSS
Exemple 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 Javascript
Exemple 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 HTML
Exemple 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...