Comment changer la classe d'un élément avec JavaScript?
Comment changer une classe d'un élément HTML en réponse à un événement onClick à l'aide de JavaScript?
Techniques HTML5 modernes pour changer de classe
Les navigateurs modernes ont ajouté classList qui fournit des méthodes facilitant la manipulation de 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 existe un shim pour l'ajouter à IE8 et IE9, disponible à partir de cette page . Cependant, il devient de plus en plus supporté .
Solution simple multi-navigateurs
La méthode JavaScript standard pour sélectionner un élément utilise document.getElementById("Id") , ce que les exemples suivants utilisent: vous pouvez bien sûr obtenir des éléments autrement, et dans la bonne situation, utiliser simplement this au lieu de cela, cependant, entrer dans les détails à ce sujet dépasse le cadre de la réponse.
Pour changer toutes les classes d'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 suit:
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 remplacement de regex simple 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 rationnelle 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)
L'indicateur g indique au remplacement de se répéter si nécessaire, au cas où le nom de la classe aurait été ajouté plusieurs fois.
Pour vérifier si une classe est déjà appliquée à un élément:
La même expression rationnelle utilisée ci-dessus pour supprimer une classe peut également servir à vérifier si une classe particulière existe:
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
Affectation de ces actions à des événements onclick:
Bien qu'il soit possible d'écrire JavaScript directement dans les attributs d'événement HTML (tels que onclick="this.className+=' MyClass'"), ce comportement n'est pas recommandé. En particulier dans les applications plus volumineuses, un code plus facile à gérer 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 à l'appeler 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 l'inclusion de JavaScript dans un fichier distinct peut s'avérer plus appropriée.)
La deuxième étape consiste à déplacer l'événement onclick du code HTML vers JavaScript, par exemple à l'aide de 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 chargement de HTML. Sans cela, le MyElement pourrait ne pas exister lorsque le code JavaScript est appelé pour que cette ligne échoue.)
Cadres et bibliothèques JavaScript
Le code ci-dessus est entièrement en JavaScript. Toutefois, il est courant d'utiliser un framework ou une bibliothèque pour simplifier les tâches courantes, ainsi que de tirer profit des bogues corrigés et des cas Edge auxquels vous pourriez ne pas penser lors de l'écriture de votre code.
Bien que certaines personnes considèrent qu’il est excessif d’ajouter un cadre d’environ 50 Ko pour changer simplement une classe, il vaut la peine d’envisager tout travail important sur JavaScript ou tout ce qui pourrait avoir un comportement inhabituel entre navigateurs.
(Très grossièrement, une bibliothèque est un ensemble d’outils conçus pour une tâche spécifique, alors qu’un framework contient généralement plusieurs bibliothèques et effectue un ensemble complet de tâches.)
Les exemples ci-dessus ont été reproduits ci-dessous à l’aide de jQuery , probablement la bibliothèque JavaScript la plus utilisée (bien que d’autres méritent également d’être explorées).
(Notez que $ voici l'objet jQuery.)
Changer de classe 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 pour supprimer une classe qui:
$('#MyElement').toggleClass('MyClass');
Assigner une fonction à un événement click avec jQuery:
$('#MyElement').click(changeClass);
ou, sans avoir besoin d'un identifiant:
$(':button:contains(My Button)').click(changeClass);
Vous pouvez aussi simplement faire:
document.getElementById ('id'). classList.add ('classe');
document.getElementById ('id'). classList.remove ('class').Et pour changer de classe (supprimer s'il existe, sinon ajoutez-le):
document.getElementById ('id'). classList.toggle ('class');
Dans l'un de mes anciens projets qui n'utilisaient pas jQuery, j'ai créé les fonctions suivantes pour ajouter, supprimer et vérifier si l'élément a 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, ' ');
}
}
Donc, par exemple, si je veux que l'onclick ajoute une classe au 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>
Pour le moment, il vaudrait mieux utiliser jQuery.
Vous pouvez utiliser node.className comme suit:
document.getElementById('foo').className = 'bar';
Cela devrait fonctionner dans IE5.5 et suivant selon PPK .
Wow, surpris qu'il y ait tellement de réponses exagérées ici ...
<div class="firstClass" onclick="this.className='secondClass'">
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);
}
}
Cela fonctionne pour moi:
function setCSS(eleID) {
var currTabElem = document.getElementById(eleID);
currTabElem.setAttribute("class", "some_class_name");
currTabElem.setAttribute("className", "some_class_name");
}
Vous pouvez également étendre l'objet HTMLElement afin d'ajouter des méthodes pour ajouter, supprimer, basculer et vérifier les classes ( Gist ):
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 simplement ceci (sur click ajoutera ou supprimera une classe):
document.getElementById('yourElementId').onclick = function() {
this.toggleClass('active');
}
Voici demo .
Juste pour ajouter des informations provenant d’un autre framework populaire, Google Closures, voyez leur dom/classes class:
goog.dom.classes.add(element, var_args)
goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)
goog.dom.classes.remove(element, var_args)
Une option pour sélectionner l'élément consiste à utiliser goog.dom.query avec un sélecteur CSS3:
var myElement = goog.dom.query("#MyElement")[0];
Quelques petites notes et modifications sur les regex précédentes:
Vous voudrez le faire globalement si la liste de classes a plusieurs fois le nom de la classe. Et, vous voudrez probablement supprimer des espaces aux extrémités de la liste de classes et convertir plusieurs espaces en un seul espace afin d'éviter toute succession d'espaces. Aucune de ces choses ne devrait être un problème si le seul code dinking avec les noms de classe utilise l'expression régulière ci-dessous et supprime un nom avant de l'ajouter. Mais. Eh bien, qui sait qui pourrait douter de la liste des noms de classe.
Cette expression régulière est insensible à la casse, de sorte que des bogues dans les noms de classe peuvent apparaître avant que le code ne soit utilisé sur un navigateur qui ne se soucie pas de la casse dans les noms de classe.
var s = "testing one four one two";
var cls = "one";
var rg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
Changer la classe CSS d'un élément avec JavaScript dans ASP.NET :
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
End If
End Sub
Je voudrais utiliser jQuery et écrire quelque chose comme ça:
jQuery(function($) {
$("#some-element").click(function() {
$(this).toggleClass("clicked");
});
});
Ce code ajoute une fonction à appeler lorsqu'un élément de l'id some-element est cliqué. La fonction ajoute clicked à l'attribut de classe de l'élément s'il n'en fait pas déjà partie, et le supprime s'il est présent.
Oui, vous devez ajouter une référence à la bibliothèque jQuery dans votre page pour utiliser ce code, mais au moins vous pouvez être sûr que la plupart des fonctions de la bibliothèque fonctionneraient sur la quasi-totalité des navigateurs modernes, ce qui vous fera gagner du temps pour la mise en œuvre. votre propre code pour faire la même chose.
Merci
La ligne
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')
devrait être:
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');
Voici ma version qui fonctionne parfaitement:
function addHTMLClass(item, classname) {
var obj = item
if (typeof item=="string") {
obj = document.getElementById(item)
}
obj.className += " " + classname
}
function removeHTMLClass(item, classname) {
var obj = item
if (typeof item=="string") {
obj = document.getElementById(item)
}
var classes = ""+obj.className
while (classes.indexOf(classname)>-1) {
classes = classes.replace (classname, "")
}
obj.className = classes
}
Usage:
<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >
Voici un toggleClass pour basculer/ajouter/supprimer une classe sur un élément:
// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));
elem.className=elem.className.replace(matchRegExp, ''); // clear all
if (add) elem.className += ' ' + theClass;
}
voir jsfiddle
voir aussi ma réponse ici pour créer une nouvelle classe de manière dynamique
Changer la classe d'un élément dans JavaScript Vanilla avec le support IE6
Vous pouvez essayer d’utiliser la propriété node attributes pour conserver la compatibilité avec les anciens navigateurs, même IE6:
function getClassNode(element) {
for (var i = element.attributes.length; i--;)
if (element.attributes[i].nodeName === 'class')
return element.attributes[i];
}
function removeClass(classNode, className) {
var index, classList = classNode.value.split(' ');
if ((index = classList.indexOf(className)) > -1) {
classList.splice(index, 1);
classNode.value = classList.join(' ');
}
}
function hasClass(classNode, className) {
return classNode.value.indexOf(className) > -1;
}
function addClass(classNode, className) {
if (!hasClass(classNode, className))
classNode.value += ' ' + className;
}
document.getElementById('message').addEventListener('click', function() {
var classNode = getClassNode(this);
var className = hasClass(classNode, 'red') && 'blue' || 'red';
removeClass(classNode, 'red');
removeClass(classNode, 'blue');
addClass(classNode, className);
}).red {
color: red;
}
.red:before {
content: 'I am red! ';
}
.red:after {
content: ' again';
}
.blue {
color: blue;
}
.blue:before {
content: 'I am blue! '
}<span id="message" class="">Click me</span>J'utilise les fonctions JavaScript Vanilla suivantes dans mon code. Ils utilisent des expressions régulières et indexOf mais n'exigent pas de citer des caractères spéciaux dans les expressions régulières.
function addClass(el, cn) {
var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
c1 = (" " + cn + " ").replace(/\s+/g, " ");
if (c0.indexOf(c1) < 0) {
el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
}
}
function delClass(el, cn) {
var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
c1 = (" " + cn + " ").replace(/\s+/g, " ");
if (c0.indexOf(c1) >= 0) {
el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
}
}
Vous pouvez également utiliser element.classList dans les navigateurs modernes.
classList API DOM:
Une manière très pratique d’ajouter et de supprimer des classes est l’API DOM classList. Cette API nous permet de sélectionner toutes les classes d'un élément DOM spécifique afin de modifier la liste à l'aide de javascript. Par exemple:
const el = document.getElementById("main");
console.log(el.classList);<div class="content wrapper animated" id="main"></div>Nous pouvons observer dans le journal que nous récupérons un objet avec non seulement les classes de l'élément, mais également de nombreuses méthodes et propriétés auxiliaires. Cet objet hérite de l'interface DOMTokenList , interface utilisée dans le DOM pour représenter un ensemble de jetons séparés par des espaces (comme des classes).
Exemple:
const el = document.getElementById('container');
function addClass () {
el.classList.add('newclass');
}
function replaceClass () {
el.classList.replace('foo', 'newFoo');
}
function removeClass () {
el.classList.remove('bar');
}button{
margin: 20px;
}
.foo{
color: red;
}
.newFoo {
color: blue;
}
.bar{
background-color:powderblue;
}
.newclass{
border: 2px solid green;
}<div class="foo bar" id="container">
"Sed ut perspiciatis unde omnis
iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas
</div>
<button onclick="addClass()">AddClass</button>
<button onclick="replaceClass()">ReplaceClass</button>
<button onclick="removeClass()">removeClass</button>
OK, je pense que dans ce cas, vous devriez utiliser jQuery ou écrire vos propres méthodes en JavaScript pur. Ma préférence est d’ajouter mes propres méthodes plutôt que d’injecter tout jQuery dans mon application si je n’ai pas besoin de cela pour d’autres raisons.
Je voudrais faire quelque chose comme ci-dessous comme méthodes pour mon framework javascript pour ajouter quelques fonctionnalités qui gèrent l'ajout de classes, la suppression de classes, etc. similaire à jQuery, ceci est entièrement supporté dans IE9 +, mon code est également écrit en ES6. pour vous assurer que votre navigateur le supporte ou que vous utilisez quelque chose comme babel, sinon vous devez utiliser la syntaxe ES5 dans votre code. De cette manière, nous trouvons un élément via ID, ce qui signifie que l'élément doit avoir un ID pour être sélectionné:
//simple javascript utils for class management in ES6
var classUtil = {
addClass: (id, cl) => {
document.getElementById(id).classList.add(cl);
},
removeClass: (id, cl) => {
document.getElementById(id).classList.remove(cl);
},
hasClass: (id, cl) => {
return document.getElementById(id).classList.contains(cl);
},
toggleClass: (id, cl) => {
document.getElementById(id).classList.toggle(cl);
}
}
et vous pouvez simplement appeler les utiliser comme ci-dessous, imaginez que votre élément ait l'id de 'id' et la classe de 'classe', assurez-vous de les transmettre en tant que chaîne, vous pouvez utiliser l'utilitaire comme ci-dessous:
classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');
Oui, il y a plusieurs façons de le faire. Dans la syntaxe ES6, nous pouvons réaliser facilement. Utilisez ce code bascule ajouter et supprimer une classe.
const tabs=document.querySelectorAll('.menu li');
for(let tab of tabs){
tab.onclick=function(){
let activetab=document.querySelectorAll('li.active');
activetab[0].classList.remove('active')
tab.classList.add('active');
}
}body {
padding:20px;
font-family:sans-serif;
}
ul {
margin:20px 0;
list-style:none;
}
li {
background:#dfdfdf;
padding:10px;
margin:6px 0;
cursor:pointer;
}
li.active {
background:#2794c7;
font-weight:bold;
color:#ffffff;
}<i>Please click an item:</i>
<ul class="menu">
<li class="active"><span>Three</span></li>
<li><span>Two</span></li>
<li><span>One</span></li>
</ul>Je pensais que je mettrais ceci dans:
function inArray(val, ary){
for(var i=0,l=ary.length; i<l; i++){
if(ary[i] === val){
return true;
}
}
return false;
}
function removeClassName(classNameS, fromElement){
var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
for(var i=0,l=s.length; i<l; i++){
if(!iA(s[i], x))r.Push(s[i]);
}
fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
var s = toElement.className.split(/\s/);
s.Push(c); toElement.className = s.join(' ');
}
il suffit de dire myElement.classList="new-class" sauf si vous devez conserver d'autres classes existantes, auquel cas vous pouvez utiliser les méthodes classList.add, .remove.
var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");
goButton.addEventListener("click", function() {
divOne.classList="blue";
});div{
min-height:48px;
min-width:48px;
}
.bordered{
border: 1px solid black;
}
.green{
background:green;
}
.blue{
background: blue;
}<button id="go">Change Class</button>
<div id="one" class="bordered green">
</div>essayer
function change(el) { el.className='second' }.first { width: 50px; height: 50px; background: blue }
.second { width: 150px; height: 150px; background: red; transition: all 0.3s ease-in }<button onclick="change(box)">Click me</button>
<div id="box" class="first"></div>LES OPTIONS.
Voici quelques exemples de styles et classList pour vous permettre de voir quelles sont les options dont vous disposez et comment utiliser classList pour faire ce que vous voulez.
style et classList
La différence entre style et classList réside dans le fait qu'avec style, vous ajoutez des propriétés de style à l'élément, mais que classList contrôle un peu la classe (les classes) de l'élément (add, remove, toggle, contain), je vais vous montrer comment d'utiliser les méthodes add et remove car ce sont les plus populaires.
Exemple de style
Si vous voulez ajouter la propriété margin-top dans un élément, vous feriez comme ceci:
// Get the Element
const el = document.querySelector('#element');
// Add CSS property
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.
classList Exemple
Disons que nous avons un <div class="class-a class-b">, dans ce cas, nous avons déjà 2 classes ajoutées à notre élément div, class-a et class-b, et nous voulons contrôler quelles classes remove et à quelle classe add. C’est là que classList devient pratique.
Supprimer class-b
// Get the Element
const el = document.querySelector('#element');
// Remove class-b style from the element
el.classList.remove("class-b")
Ajouter class-c
// Get the Element
const el = document.querySelector('#element');
// Add class-b style from the element
el.classList.add("class-c")
Beaucoup de réponses, beaucoup de bonnes réponses.
TL; DR:
document.getElementById('id').className = 'class'
OU
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');
C'est tout.
Et, si vous voulez vraiment connaître le pourquoi et vous renseigner, alors je vous suggère de lire la réponse de Peter Boughton, c'est parfait:
https://stackoverflow.com/a/196038/1804013
Remarque;
Ceci est possible avec (document ou événement):
- getElementById ()
- getElementsByClassName ()
- querySelector ()
- querySelectorAll ()