Comment puis-je modifier efficacement les classes d'éléments à l'aide de JavaScript ?

Comment modifier les classes d'éléments à l'aide d'événements JavaScript

Techniques HTML5 modernes

Les navigateurs modernes prennent en charge la propriété classList, qui fournit des méthodes pour manipuler les 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');

Solution simple multi-navigateurs

Changement Toutes les classes :

Utilisez className pour définir toutes les classes :

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

Ajout d'une classe supplémentaire :

Ajoutez un espace et la nouvelle 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érification d'une classe :

Utilisez la même expression régulière pour vérifier :

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

Attribuer des actions aux événements onClick

Éviter en utilisant JavaScript en ligne dans les attributs HTML. Au lieu de cela, créez une fonction et appelez-la dans l'attribut onClick :

<script>
  function changeClass() {
    // Action code
  }
</script>
<button onClick="changeClass()">My Button</button>

Ou avec addEventListener :

<script>
  window.onload = function() {
    document.getElementById("MyElement").addEventListener('click', changeClass);
  }
</script>
<button>

Frameworks et bibliothèques JavaScript

Exemples jQuery

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

Basculer un class :

$('#MyElement').toggleClass('MyClass');

Attribuer un événement de clic :

$('#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!