Comment puis-je manipuler efficacement les classes d'éléments JavaScript ?

Techniques de manipulation de classe JavaScript

Modification de la classe d'un élément à la demande

Pour modifier dynamiquement la classe d'un élément en fonction d'événements tels que des clics, JavaScript propose plusieurs approches :

Manipulation de classe HTML5 moderne

Moderne les navigateurs prennent en charge classList, ce qui simplifie la gestion des classes :

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');

Solutions multi-navigateurs

Pour les navigateurs dépourvus de classList, utilisez ces méthodes :

Remplacer toutes les classes

Définissez l'attribut className pour remplacer toutes les classes existantes :

document.getElementById("MyElement").className = "MyClass";

Ajoutez un Classe

Ajoutez un espace et le nouveau nom de classe au nom de classe existant :

document.getElementById("MyElement").className += " MyClass";

Supprimez une classe

Utilisez une expression régulière pour supprimer une classe spécifique sans affecter les autres :

document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g, '');

Vérifiez si une classe existe

Utilisez la même expression régulière pour la suppression de classe afin de vérifier la présence d'une classe :

if (document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/))

Attacher des fonctions aux événements onClick

Enveloppez ces actions dans des fonctions et appelez-les à partir des gestionnaires d'événements :

function changeClass() {
  // Code examples from above
}
document.getElementById("MyElement").addEventListener('click', changeClass);

Frameworks et bibliothèques JavaScript

Les frameworks comme jQuery rationalisent la manipulation des classes :

$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ($('#MyElement').hasClass('MyClass'))
$('#MyElement').click(changeClass);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!