Changement d'un élément de la classe CSS avec JavaScript

Question

Comment puis-je modifier une classe CSS d'un élément HTML en réponse à une onClick événement à l'aide de JavaScript?

Answer 1

L'ajout et la Suppression des Classes, avec une simple croix-navigateur JavaScript

Le JavaScript standard de manière à sélectionner un élément à l'aide de document.getElementById("Id"), ce qui est ce que les exemples suivants utilisez - vous pouvez bien sûr obtenir des éléments dans d'autres façons, et dans la bonne situation peut tout simplement utiliser this au lieu - cependant, va dans le détail sur ce qui est au-delà de la portée de la réponse.

Pour modifier toutes les classes à un élément:

Pour remplacer toutes les classes existantes avec 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 à un élément:

Pour ajouter une classe à un élément, sans enlever/touchant les valeurs, ajouter un espace et le nouveau nom de la classe, comme ceci:

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

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

Pour supprimer une seule classe à un élément, sans affecter les autres types potentiels, une simple regex de remplacement 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 expression est comme suit:

(?:^|\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)

L' g drapeau indique le remplacer à répéter au besoin, dans le cas où le nom de la classe a été ajoutée à plusieurs reprises.

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

La même expression régulière utilisée ci-dessus pour la suppression d'une classe peut également être utilisé pour vérifier si une classe particulière existe:

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

L'attribution de ces actions à l'événement onclick:

Alors qu'il est possible d'écrire du code JavaScript directement dans le HTML attributs d'événement (comme onclick="this.className+=' MyClass'") ce n'est pas recommandé de comportement. En particulier sur les plus grandes applications, plus facile à gérer le code est obtenu en séparant le balisage HTML JS interaction logique.

La première étape pour atteindre cet objectif est par la création d'une fonction, et l'appel de 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 tout simplement pour des raisons de concision d'exemple, et dont le JS dans un fichier distinct peut être plus approprié.)}

La deuxième étape consiste à déplacer l'événement onclick de l'HTML et en JavaScript, par exemple à l'aide de la méthode 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 fenêtre.onload partie est nécessaire, de sorte que le contenu de la fonction sont exécutées après le HTML a fini de se charger, - sans cela, le MyElement peut ne pas exister lorsque le JS est appelé, de sorte que la ligne serait un échec.)

JavaScript Frameworks et Bibliothèques

Le code ci-dessus est tout en JavaScript standard, cependant c'est une pratique courante, l'utilisation d'un cadre ou d'une bibliothèque pour simplifier les tâches courantes, ainsi que des prestations de corrections de bogues et des cas limites que vous n'auriez pas pensé lors de la rédaction de votre code.

Alors que certaines personnes considèrent que c'est exagéré pour ajouter un ~50KB cadre pour la simple modification d'une classe, si vous faites n'importe quel substantielle de la quantité de travail JavaScript, ou tout ce qui pourrait avoir inhabituelle de la croix-le comportement du navigateur, il est bien utile d'examiner.

(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 effectue un ensemble complet de fonctions.)

Les exemples ci-dessus ont été reproduits ci-dessous à l'aide de jQuery, probablement le plus couramment utilisé bibliothèque JavaScript (mais il en existe d'autres qui mérite d'être examiné trop).

(À noter qu' $ ici est l'objet jQuery.)

Évolution des Classes avec jQuery:

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

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

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

En outre, jQuery fournit un raccourci pour l'ajout d'une classe si elle ne s'applique pas, ou la suppression d'une classe qui n':

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

L'affectation d'une fonction à un événement de clic avec jQuery:

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

ou, sans avoir besoin d'un id:

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

HTML5 Techniques de modification de classes

Les navigateurs modernes ont ajouté classList qui fournit des méthodes pour rendre plus facile à manipuler classes sans avoir besoin d'une bibliothèque:

document.getElementById("MyElement").classList.add('class');

document.getElementById("MyElement").classList.remove('class');

if ( document.getElementById("MyElement").classList.contains('class') )

document.getElementById("MyElement").classList.toggle('class');

Malheureusement, elles ne fonctionnent pas dans Internet Explorer antérieures à la version 10, mais il y a une cale pour ajouter le support d'IE8 et IE9, disponible à partir de cette page.

Answer 2

Vous pourriez tout aussi bien le faire:

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

Et pour basculer d'une classe (à supprimer si il existe d'autre de l'ajouter):

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

Answer 3

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

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 pour ajouter un peu de 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>

Maintenant, pour sûr, ça allait un peu mieux utiliser jQuery.

Answer 4

Vous pouvez utiliser node.className comme:

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

Cela devrait fonctionner dans IE5.5 et selon PPK.

Answer 5

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

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