La propriété javascript className d'un élément HTML donne accès à la classe css d'un élément. La fonction setClass permet de modifier la classe css d'un objet html.
Code javascript
<script type="text/javascript">
<!--
/**
* @author Patrick Poulain
* @see http://petitchevalroux.net
* @licence GPL
*
* Modifie la classe css d'un element HTML
*
* @param string elementId identifiant de l'element html
* @param string class nom de la nouvelle classe css
* @return boolean true en cas de succés false en cas d'echec
**/
function setClass(elementId,class)
{
/*On recupere l'element html dans le document*/
var e = document.getElementById(elementId);
/*Si on a trouver l'element on modifie sa classe css*/
if(e != null)
{
e.className = class;
return true;
}
/*On a pas trouver l'element c'est un echec*/
return false;
}
//-->
</script>
Exemple d'utilisation
Cet exemple affiche une div de couleur verte qui devient bleu lorsque l'on passe la souris dessus.
<style type="text/css"><!--
.divBlue {
background:blue;
}
.divGreen {
background:green;
}
-->
</style>
<div id="madiv" style="width:100px;height:100px;" class="divGreen" onmouseover="setClass('madiv','divBlue');" onmouseout="setClass('madiv','divGreen');"> </div>
