Techniques HTML5 modernes pour changer de classe
Les navigateurs modernes ont ajouté classList qui fournit des méthodes pour faciliter la manipulation des classes sans avoir besoin d'une bibliothèque:
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');
Malheureusement, ceux-ci ne fonctionnaient pas dans Internet Explorer avant la version 10, bien qu'il existe un module d' interface pour l'ajouter à IE8 et IE9, disponible à partir de cette page . Il est, cependant, de plus en plus pris en charge .
Solution multi-navigateur simple
La méthode JavaScript standard pour sélectionner un élément utilise document.getElementById("Id"), ce que les exemples suivants utilisent - vous pouvez bien sûr obtenir des éléments d'autres manières, et dans la bonne situation, vous pouvez simplement utiliserthis place - cependant, entrer dans les détails à ce sujet dépasse le cadre de la réponse.
Pour modifier toutes les classes d'un élément:
Pour remplacer toutes les classes existantes par une ou plusieurs nouvelles classes, définissez l'attribut className:
document.getElementById("MyElement").className = "MyClass";
(Vous pouvez utiliser une liste délimitée par des espaces pour appliquer plusieurs classes.)
Pour ajouter une classe supplémentaire à un élément:
Pour ajouter une classe à un élément, sans supprimer / affecter les valeurs existantes, ajoutez un espace et le nouveau nom de classe, comme ceci:
document.getElementById("MyElement").className += " MyClass";
Pour supprimer une classe d'un élément:
Pour supprimer une seule classe d'un élément, sans affecter d'autres classes potentielles, un simple regex replace est requis:
document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace
( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */
Une explication de cette expression régulière est la suivante:
(?:^|\s) # Match the start of the string, or any single whitespace character
MyClass # The literal text for the classname to remove
(?!\S) # Negative lookahead to verify the above is the whole classname
# Ensures there is no non-space character following
# (i.e. must be end of string or a space)
le g indicateur indique au remplacement de se répéter selon les besoins, au cas où le nom de classe a été ajouté plusieurs fois.
Pour vérifier si une classe est déjà appliquée à un élément:
La même expression régulière utilisée ci-dessus pour supprimer une classe peut également être utilisée pour vérifier si une classe particulière existe:
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
Affectation de ces actions aux événements onclick:
Bien qu'il soit possible d'écrire JavaScript directement à l'intérieur des attributs d'événement HTML (tels que onclick="this.className+=' MyClass'" ), ce comportement n'est pas recommandé. Surtout sur les applications plus grandes, un code plus facile à maintenir est obtenu en séparant le balisage HTML de la logique d'interaction JavaScript.
La première étape pour y parvenir consiste à créer une fonction et à appeler la fonction dans l'attribut onclick, par exemple:
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onclick="changeClass()">My Button</button>
(Il n'est pas nécessaire d'avoir ce code dans les balises de script, c'est simplement pour la brièveté de l'exemple, et l'inclusion de JavaScript dans un fichier distinct peut être plus appropriée.)
La deuxième étape consiste à déplacer l'événement onclick hors du HTML et dans JavaScript, par exemple en utilisant addEventListener
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
window.onload = function(){
document.getElementById("MyElement").addEventListener( 'click', changeClass);
}
</script>
...
<button id="MyElement">My Button</button>
(Notez que la partie window.onload est requise pour que le contenu de cette fonction soit exécuté après le chargement du HTML - sans cela, MyElement pourrait ne pas exister lorsque le code JavaScript est appelé, de sorte que la ligne échouerait.)
Cadres et bibliothèques JavaScript
Le code ci-dessus est entièrement en JavaScript standard, mais il est courant d'utiliser soit un framework ou une bibliothèque pour simplifier les tâches courantes, ainsi que de bénéficier de bogues fixes et de cas marginaux auxquels vous pourriez ne pas penser lors de l'écriture de votre code.
Bien que certaines personnes considèrent qu'il est exagéré d'ajouter un cadre de ~ 50 Ko pour simplement changer une classe, si vous effectuez une quantité substantielle de travail JavaScript ou tout ce qui pourrait avoir un comportement inhabituel entre les navigateurs, cela vaut la peine d'être considéré.
(En gros, une bibliothèque est un ensemble d'outils conçus pour une tâche spécifique, tandis qu'un cadre contient généralement plusieurs bibliothèques et exécute un ensemble complet de fonctions.)
Les exemples ci-dessus ont été reproduits ci-dessous à l'aide de jQuery , probablement la bibliothèque JavaScript la plus utilisée (bien qu'il y en ait d'autres qui méritent également d'être étudiés).
(Notez que $voici l'objet jQuery.)
Changer de classe avec jQuery:
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
De plus, jQuery fournit un raccourci pour ajouter une classe si elle ne s'applique pas ou pour supprimer une classe qui:
$('#MyElement').toggleClass('MyClass');
Assigner une fonction à un événement de clic avec jQuery:
$('#MyElement').click(changeClass);
ou, sans avoir besoin d'un identifiant:
$(':button:contains(My Button)').click(changeClass);