Changer la classe D'un élément avec JavaScript

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

2346
demandé sur Oriol 2008-10-13 00:06:43
la source

25 ответов

Moderne HTML5 Techniques de modification de classes

les navigateurs modernes ont ajouté classList qui fournit des méthodes pour rendre plus facile de manipuler 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 v10, bien qu'il y ait un shim pour ajouter le soutien pour IT à IE8 et IE9, disponible à partir de cette page . Il est, cependant, obtenir de plus en plus pris en charge .

Simple cross-browser solution

la méthode JavaScript standard pour sélectionner un élément utilise document.getElementById("Id") , ce 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 tout simplement utiliser this à la place - cependant, entrer dans les détails sur ce est au-delà de 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 un espace pour appliquer plusieurs classes.)

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

Pour ajouter une classe à un élément, sans enlever/touchant les valeurs, 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 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 ce 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)

l'indicateur g indique le remplacement à répéter selon les besoins, dans le cas où la classe le nom a été ajouté à plusieurs reprises.

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

le même regex utilisé ci-dessus pour supprimer 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 JavaScript directement à l'intérieur les attributs HTML event (tels que onclick="this.className+=' MyClass'" ) ce comportement n'est pas recommandé. En particulier sur les applications plus grandes, plus de code maintenable est obtenue en séparant le balisage HTML de la logique D'interaction JavaScript.

la première étape pour y parvenir est de créer une fonction, et d'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 dans JavaScript, par exemple en utilisant addEventListener 1519240920"

<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.la partie onload est nécessaire pour que le contenu de cette fonction soit exécuté après le HTML a terminé le chargement - sans cela, le MyElement pourrait ne pas exister lorsque le code JavaScript est appelé, de sorte que la ligne échouerait.)



cadres et bibliothèques JavaScript

le code ci-dessus est tout en JavaScript standard, cependant il est pratique courante d'utiliser soit un framework ou une bibliothèque pour simplifier les tâches communes, ainsi que de bénéficier de bugs et de cas de bord fixes que vous ne pourriez pas penser d'lors de l'écriture de votre code.

alors que certaines personnes considèrent qu'il est exagéré d'ajouter un cadre ~50 KB pour simplement changer une classe, si vous faites une quantité substantielle de travail JavaScript, ou tout ce qui pourrait avoir un comportement inter-navigateur inhabituel, il est bien intéressant de considérer.

(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 une complète ensemble de fonctions.)

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

(notez que $ ici est l'objet jQuery.)

changement de classe avec jQuery:

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

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

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

en outre, jQuery fournit un raccourci pour ajouter une classe si il ne s'applique pas, ou supprimer une classe qui fait:

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



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



3377
répondu Peter Boughton 2018-03-08 15:49:27
la source

Vous pourriez tout aussi bien le faire:

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

et pour basculer une classe (supprimer s'il existe autrement ajouter):

document.getElementById('id').classList.toggle('class');
387
répondu Tyilo 2012-09-26 11:41:19
la source

dans un de mes vieux projets qui n'ont pas utilisé jQuery, j'ai construit les fonctions suivantes pour ajouter, enlever, et vérifier si element 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 onclick pour ajouter une classe le bouton the 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>

à ce jour pour sûr qu'il serait juste mieux d'utiliser jQuery.

101
répondu Andrew Orsich 2014-04-03 17:07:13
la source

vous pouvez utiliser node.className comme suit:

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

cela devrait fonctionner dans IE5.5 et plus selon PPK .

65
répondu Eric Wendelin 2012-08-22 04:32:33
la source

Wow, surpris qu'il y ait tant de réponses exagérées ici...

<div class="firstClass" onclick="this.className='secondClass'">
45
répondu Travis J 2014-10-20 03:47:46
la source

utilisant le 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);
    }
}
42
répondu PseudoNinja 2012-06-11 19:59:53
la source

ça marche pour moi:

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

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}
29
répondu Gopal Krishna Ranjan 2012-06-11 20:01:02
la source

ainsi vous pouvez é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 il suffit d'utiliser comme ceci (sur le clic va ajouter ou supprimer la classe):

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

Ici est démo .

17
répondu moka 2013-04-11 14:13:36
la source

juste pour ajouter des informations d'un autre cadre populaire, Google fermetures, voir leur dom / classes classe:

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 est d'utiliser goog.Dom.requête avec un sélecteur CSS3:

var myElement = goog.dom.query("#MyElement")[0];
15
répondu Ben Flynn 2011-11-27 01:04:12
la source

quelques petites notes et ajustements sur les regexes précédents:

vous voudrez le faire globalement dans le cas où la liste de classe A le nom de classe plus d'une fois. Et, vous voudrez probablement enlever des espaces des extrémités de la liste des classes et convertir plusieurs espaces en un espace pour éviter d'avoir des séries d'espaces. Aucune de ces choses ne devrait être un problème si le seul code qui scinde avec les noms de classe utilise le regex ci-dessous et supprime un nom avant de l'ajouter. Mais. Bien, qui sait qui peut être en train de boire avec la liste des noms de classe.

ce regex est insensible à la casse afin que les bogues dans les noms de classe puissent 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, ' ') + "]");
13
répondu Alex Robinson 2016-11-23 01:23:57
la source

Changement d'un élément de la classe CSS 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
12
répondu Hiren Kansara 2013-01-06 22:17:49
la source

j'utiliserais jQuery et j'écrirais quelque chose comme ceci:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

Ce code ajoute une fonction à appeler lorsqu'un élément de l'id certains éléments est cliqué. La fonction ajoute cliqué à l'attribut de classe de l'élément s'il n'en fait pas déjà partie, et le supprime s'il y est.

Oui vous devez ajouter une référence à la bibliothèque jQuery dans votre page pour utiliser ce code, mais à le moins que vous pouvez vous sentir sûr que la plupart des fonctions dans la bibliothèque fonctionnerait à peu près sur tous les navigateurs modernes, et il vous permettra de gagner du temps en mettant en œuvre votre propre code pour faire la même chose.

Merci

11
répondu shingokko 2013-10-25 06:50:27
la source

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/','');
9
répondu Eric Bailey 2011-05-24 20:39:15
la source

voici ma version, entièrement fonctionnelle:

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
}

Utilisation:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >
7
répondu alfred 2013-01-06 22:20:53
la source

Voici une 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 la création d'une nouvelle classe dynamiquement

7
répondu kofifus 2017-05-23 15:34:58
la source

Changement d'un élément de la classe en JavaScript natif avec l'appui IE6

vous pouvez essayer d'utiliser le noeud attributes propriété pour garder la compatibilité avec les vieux 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>
6
répondu Eugene Tiurin 2016-01-07 21:46:49
la source

j'utilise les fonctions JavaScript vanille suivantes dans mon code. Ils utilisent des expressions régulières et indexOf mais ne nécessitent 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 l'élément .classList dans les navigateurs modernes.

5
répondu Salman A 2014-01-18 13:37:49
la source

j'ai pensé jeter 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(' ');
}
0
répondu PHPglue 2015-03-20 05:35:01
la source

il suffit de dire myElement.classList="new-class" sauf si vous devez maintenir 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>
0
répondu Ron Royston 2017-04-21 05:50:51
la source

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 à mon application si je n'ai pas besoin de cela pour d'autres raisons.

j'aimerais faire quelque chose comme ci-dessous comme méthodes à mon cadre 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+, aussi mon code est écrit dans ES6, donc vous devez vous assurer que votre navigateur le supporte ou vous utilisez quelque chose comme babel, sinon besoin d'utiliser la syntaxe ES5 dans votre code, aussi de cette façon, nous trouvons l'é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 les utiliser comme ci-dessous, imaginez que votre élément a l'id de 'id' et la classe de 'class', assurez-vous de les passer comme une chaîne de caractères, vous pouvez utiliser l'util comme ci-dessous:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');
0
répondu Alireza 2017-06-24 06:57:57
la source

classList DOM API:

une façon 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 en utilisant 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 allons nous retrouver un objet avec non seulement les classes de l'élément, mais aussi de nombreux auxiliaires des méthodes et des propriétés. Cet objet hérite de l'interface DOMTokenList , une interface qui est utilisée dans le DOM pour représenter un ensemble de jetons séparés par l'espace (comme les 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>
  
0
répondu Willem van der Veen 2018-09-21 12:23:12
la source

code JavaScript de travail:

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

vous pouvez télécharger un code de travail à partir de ce lien .

-1
répondu Sajid 2016-11-23 01:25:47
la source

voici le code jQuery simple pour faire cela.

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

ici,

  • Class1 est un écouteur pour l'événement.
  • la classe mère est la classe qui héberge la classe que vous voulez changer
  • Clastoremove est l'ancienne classe que vous avez.
  • La classe
  • à ajouter est la nouvelle classe que vous voulez ajouter.
  • 100 est le délai d'expiration au cours duquel la classe est modifié.

Bonne Chance.

-3
répondu uttamcafedeweb 2014-07-19 17:58:00
la source

c'est plus facile avec une bibliothèque comme jQuery:

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>
-18
répondu Jon Galloway 2008-10-13 00:12:16
la source

sans vouloir vous offenser, il est impossible de changer de classe à la volée car cela force l'interprète CSS à recalculer la présentation visuelle de toute la page web.

la raison est qu'il est presque impossible pour l'interprète CSS de savoir si un héritage ou une cascade pourrait être changée, donc la réponse courte est:

jamais, jamais, Jamais de changement de nom de la classe à la volée !- )

mais habituellement vous aurez seulement besoin de changer une propriété ou deux, et qui est facilement mis en œuvre:

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}
-55
répondu roenving 2011-05-24 20:40:27
la source

Autres questions sur javascript dom html