Comment modifier la classe CSS d'un élément HTML lors d'un événement onClick ?
Il est possible en JavaScript de manipuler les classes CSS des éléments lors d'évènements, par exemple un clic.
1) Modifier la classe CSS d'un élément
La plus simple méthode pour sélectionner un élément dans une page est d'utiliser son identifiant, car il est unique. Pour cela, on se sert de la directive document.getElementById(Id). Pour changer les classes d'un élément, on modifie la propriété « className » de celui-ci. Il faut bien penser à séparer les nouvelles classes par un espace :
document.getElementById(idDeMonElement).className = « maClasse »
Pour ajouter une classe CSS sans modifier celle(s) déjà présente(s), il suffit d'ajouter à la propriété un espace suivi de la ou les nouvelle(s) classe(s) :
document.getElementById(idDeMonElement).className += « maClasse »
Pour supprimer une classe CSS, on peut utiliser une expression régulière. Elle serait écrite de la manière suivante :
(?:^|s)maClasse(?!S) où :
- (?:^|s) indique le début d'une chaîne de caractères ou un espace,
- maClasse indique la classe CSS recherchée,
- (?!S) permet de vérifier qu'il n'y a pas un caractère autre qu'un caractère d'espacement qui suit le nom de la classe.
Avec cette expression régulière, on peut se servir de la méthode replace pour supprimer l'élément :
document.getElementById(idDeMonElement).className = document.getElementById(idDeMonElement).className.replace(/(?:^|s)maClasse(?!S)/g, '');
On peut également vérifier si la classe est déjà appliquée à l'élément :
if (document.getElementById(idDeMonElement).className.match(/(?:^|s)MyClasse(?!S)/)
2) Ajouter la directive sur un clic
Il est possible d'ajouter la directive directement dans l'attribut onClick d'un élément pour que le code s'exécute quand on clique sur l'élément :
<button id=bouton onClick=document.getElementById('bouton') += 'boutonRouge';>Mon Bouton</button>
Il est conseillé, afin de rendre le code plus facile à maintenir, de séparer le javascript de l'HTML en mettant la directive dans une fonction et en ajoutant l'évènement click à la fin du chargement de la page (onLoad).
<script type=text/javascript>
function changerClasse()
{
document.getElementById(bouton) += boutonRouge ;
}
window.onload = function()
{
document.getElementById(bouton).addEventListener(click , changerClasse);
}
</script>
<button id="bouton>Mon Bouton</button>