Comment modifier la classe d'un élément à l'aide de JavaScript ?

Comment modifier la classe d'un élément à l'aide de JavaScript

En réponse à divers événements comme onclick, JavaScript propose plusieurs techniques pour modifier la classe d'un élément HTML.

Techniques HTML5 modernes

Pour des navigateurs prenant en charge classList, les méthodes suivantes offrent une approche simple :

• 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 des compatibilité du navigateur :

Pour modifier toutes les classes

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

Pour ajouter un Class

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

Pour supprimer une classe

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

Pour vérifier si une classe est appliqué

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

Attribuer des actions aux événements onClick

Pour séparer HTML et JavaScript, il est recommandé d'utiliser fonctions :

• HTML

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

• JavaScript

  function changeClass() {
    // Code examples from above
  }

Vous pouvez également utiliser addEventListener :

window.onload = function() {
    document.getElementById("MyElement").addEventListener('click', changeClass);
}

Frameworks et bibliothèques JavaScript

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

• Pour changer Classes

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

• Raccourci pour ajouter/supprimer une classe

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

• Attribuer une fonction à cliquer Événement

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