Comment puis-je gérer dynamiquement les classes d'éléments en JavaScript ?

Comment puis-je modifier dynamiquement la classe d'un élément avec JavaScript ?

Techniques HTML5 modernes pour la manipulation de classe

Prise en charge des navigateurs modernes la propriété classList, qui fournit des méthodes pratiques pour ajouter, supprimer ou basculer des classes sans avoir besoin de ressources externes. bibliothèques :

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

Modification de toutes les classes

Pour remplacer toutes les classes existantes par de nouvelles, utilisez className :

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

Ajout d'une classe supplémentaire

Ajoutez un espace et le nouveau nom de la classe :

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

Supprimer une classe

Utiliser une expression régulière remplacer :

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

Vérifier si une classe est appliquée

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

Gestion des événements

Vous pouvez attribuer ces actions à onclick ou à d'autres événements par :

• Appel d'une fonction dans l'attribut onClick :

<button onClick="changeClass()"></button>

• Utilisation de addEventListener en JavaScript :

document.getElementById("MyElement").addEventListener('click', changeClass);

Frameworks JavaScript et Bibliothèques

Les frameworks et bibliothèques simplifient ces tâches, comme jQuery :

$('#MyElement').addClass('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!