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

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.

vous pouvez utiliser node.className comme suit:

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

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

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

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

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

ça marche pour moi:

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

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

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 .

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];

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, ' ') + "]");

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

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

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

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

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>

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.

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

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>

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

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>
  

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 .

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.

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>

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";
}