Question Modifier la classe d'un élément avec JavaScript


Comment puis-je changer une classe d'un élément HTML en réponse à un onClick événement utilisant JavaScript?


2286
2017-10-12 20:06


origine


Réponses:


Techniques HTML5 modernes pour changer de classe

Les navigateurs modernes ont ajouté classList qui fournit des méthodes pour faciliter la manipulation des classes sans avoir besoin d'une bibliothèque:

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

Malheureusement, ceux-ci ne fonctionnent pas dans Internet Explorer avant la v10, bien qu'il y ait un cale pour ajouter le support pour IE8 et IE9, disponible à partir de cette page. Il est, cependant, de plus en plus prise en charge.

Solution simple de navigateur croisé

La méthode JavaScript standard pour sélectionner un élément utilise document.getElementById("Id"), qui est ce que les exemples suivants utilisent - vous pouvez bien sûr obtenir des éléments d'autres façons, et dans la bonne situation peut simplement utiliser this Au lieu de cela, cependant, entrer dans les détails à ce sujet dépasse la portée de la réponse.

Pour changer toutes les classes pour un élément:

Pour remplacer toutes les classes existantes par une ou plusieurs nouvelles classes, définissez l'attribut className:

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

(Vous pouvez utiliser une liste délimitée par des espaces pour appliquer plusieurs classes.)

Pour ajouter une classe supplémentaire à un élément:

Pour ajouter une classe à un élément, sans supprimer / affecter les valeurs existantes, ajoutez un espace et le nouveau nom de classe, comme ceci:

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

Pour supprimer une classe d'un élément:

Pour supprimer une seule classe d'un élément, sans affecter les autres classes potentielles, un simple remplacement de regex est requis:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

Une explication de cette regex est la suivante:

(?:^|\s) # Match the start of the string, or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be end of string or a space)

le g flag indique au remplacement de le répéter si nécessaire, dans le cas où le nom de la classe a été ajouté plusieurs fois.

Pour vérifier si une classe est déjà appliquée à un élément:

La même regex utilisée ci-dessus pour supprimer une classe peut également être utilisée pour vérifier si une classe particulière existe:

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


Affectation de ces actions aux événements onclick:

Bien qu'il soit possible d'écrire du code JavaScript directement dans les attributs d'événement HTML (tels que onclick="this.className+=' MyClass'"Ce comportement n'est pas recommandé. Surtout sur les applications plus grandes, un code plus maintenable est obtenu en séparant le balisage HTML de la logique d'interaction JavaScript.

La première étape pour y parvenir consiste à créer une fonction et à appeler la fonction dans l'attribut onclick, par exemple:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

(Il n'est pas nécessaire d'avoir ce code dans les balises de script, c'est simplement pour la brièveté de l'exemple, et inclure le JavaScript dans un fichier distinct peut être plus approprié.)

La deuxième étape consiste à déplacer l'événement onclick hors du HTML et en JavaScript, par exemple en utilisant addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

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

(Notez que la partie window.onload est requise pour que le contenu de cette fonction soit exécuté après le HTML a fini de charger - sans cela, le MyElement pourrait ne pas exister quand le code JavaScript est appelé, donc cette ligne échouerait.)


Frameworks et bibliothèques JavaScript

Le code ci-dessus est tout en JavaScript standard, cependant il est courant d'utiliser un framework ou une bibliothèque pour simplifier les tâches courantes, ainsi que bénéficier de bugs fixes et de cas limites auxquels vous pourriez ne pas penser lorsque vous écrivez votre code.

Tandis que certaines personnes considèrent qu'il est trop compliqué d'ajouter un framework de ~ 50 Ko pour simplement changer de classe, si vous effectuez une quantité importante de travail JavaScript, ou tout ce qui pourrait avoir un comportement cross-browser inhabituel, cela vaut la peine d'être considéré.

(Très grossièrement, une bibliothèque est un ensemble d'outils conçus pour une tâche spécifique, tandis qu'un cadre contient généralement plusieurs bibliothèques et remplit un ensemble complet de fonctions.)

Les exemples ci-dessus ont été reproduits ci-dessous en utilisant jQuery, probablement la bibliothèque JavaScript la plus utilisée (bien qu'il y en ait d'autres qui méritent d'être étudiées aussi).

(Notez que $ voici l'objet jQuery.)

Modification des classes avec jQuery:

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

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

if ( $('#MyElement').hasClass('MyClass') )

De plus, jQuery fournit un raccourci pour ajouter une classe si elle ne s'applique pas, ou supprimer une classe qui:

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


Affectation d'une fonction à un événement click avec jQuery:

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

ou, sans avoir besoin d'un identifiant:

$(':button:contains(My Button)').click(changeClass);



3293
2017-10-12 20:45



Vous pourriez aussi faire:

document.getElementById ('id'). classList.add ('class');
document.getElementById ('id'). classList.remove ('class');

Et pour basculer une classe (supprimer si existe else l'ajouter):

document.getElementById ('id'). classList.toggle ('class');

380
2017-08-05 17:44



Dans l'un de mes anciens projets qui n'utilisait pas jQuery, j'ai construit les fonctions suivantes pour ajouter, supprimer et vérifier si l'élément a class:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

Ainsi, par exemple, si je veux onclick ajouter une classe le bouton je peux utiliser ceci:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

À coup sûr, il serait préférable d'utiliser jQuery.


98
2018-05-28 07:32



Vous pouvez utiliser node.className ainsi:

document.getElementById('foo').className = 'bar';

Cela devrait fonctionner dans IE5.5 et jusqu'à selon PPK.


64
2017-10-12 20:33



Wow, surpris il y a tellement de réponses exagérées ici ...

<div class="firstClass" onclick="this.className='secondClass'">

46
2018-01-05 19:14



En utilisant du code JavaScript pur:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

40
2017-09-20 15:26



Cela fonctionne pour moi:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

27
2017-12-08 09:36



Vous pouvez également étendre l'objet HTMLElement, afin d'ajouter des méthodes pour ajouter, supprimer, basculer et vérifier les classes (essentiel):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

Et puis utilisez juste comme ceci (sur le clic ajoutera ou enlèvera la classe):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

Voici démo.


16
2018-04-11 10:13