Modifier la classe CSS d'un élément

Comment changer la classe d'un élement HTML en javascript

javascript class, javascript modifier css, changer class javascript, modifier css javascript, css class, modifier class javascript, javascript class css, javascript modifier class, javascript changer css, javascript changer class, javascript css, class javascript, changer css javascript, changer classe javascript, modifier class css javascript

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');">&nbsp;</div>