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>

  Copier après la connexion

• JavaScript

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

  Copier après la connexion

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

  Copier après la connexion

• Raccourci pour ajouter/supprimer une classe

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

  Copier après la connexion

• Attribuer une fonction à cliquer Événement

  $('#MyElement').click(changeClass);

  Copier après la connexion

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!