Como posso alterar uma classe de um elemento HTML em resposta a um onclickevento usando JavaScript?

Técnicas modernas de HTML5 para mudar de classe

Navegadores modernos adicionaram classList, que fornece métodos para facilitar a manipulação de classes sem a necessidade de uma biblioteca:

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

Infelizmente, eles não funcionam no Internet Explorer anterior à v10, embora exista uma restrição para adicionar suporte ao IE8 e IE9, disponível nesta página . É, no entanto, cada vez mais suportado .

Solução simples para vários navegadores

A maneira JavaScript padrão de selecionar um elemento está usando document.getElementById("Id"), que é o que os exemplos a seguir usam - é claro que você pode obter elementos de outras maneiras e, na situação certa, pode simplesmente usar this- no entanto, entrar em detalhes sobre isso está além do escopo da resposta.

Para alterar todas as classes para um elemento:

Para substituir todas as classes existentes por uma ou mais novas classes, configure o atributo className:

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

(Você pode usar uma lista delimitada por espaço para aplicar várias classes.)

Para adicionar uma classe adicional a um elemento:

Para adicionar uma classe a um elemento, sem remover / afetar os valores existentes, acrescente um espaço e o novo nome da classe, da seguinte maneira:

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

Para remover uma classe de um elemento:

Para remover uma única classe de um elemento, sem afetar outras classes em potencial, é necessária uma simples substituição de regex:

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

Uma explicação desse regex é a seguinte:

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

O gsinalizador informa à substituição para repetir conforme necessário, caso o nome da classe tenha sido adicionado várias vezes.

Para verificar se uma classe já está aplicada a um elemento:

O mesmo regex usado acima para remover uma classe também pode ser usado para verificar se existe uma classe específica:

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

Atribuindo essas ações a eventos de clique único:

Embora seja possível escrever JavaScript diretamente dentro dos atributos de evento HTML (como onclick="this.className+=' MyClass'"), isso não é um comportamento recomendado. Especialmente em aplicativos maiores, é conseguido um código mais sustentável, separando a marcação HTML da lógica de interação JavaScript.

O primeiro passo para conseguir isso é criando uma função e chamando a função no atributo onclick, por exemplo:

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

_{(Não é necessário ter esse código em tags de script, isso é apenas por uma questão de brevidade, por exemplo, e incluir o JavaScript em um arquivo distinto pode ser mais apropriado.)}

A segunda etapa é mover o evento onclick para fora do HTML e para o JavaScript, por exemplo, usando 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>

(Observe que a parte window.onload é necessária para que o conteúdo dessa função seja executado após o término do carregamento do HTML - sem isso, o MyElement poderá não existir quando o código JavaScript for chamado, para que a linha falhe.)

Frameworks e bibliotecas JavaScript

O código acima é todo em JavaScript padrão, no entanto, é uma prática comum usar uma estrutura ou uma biblioteca para simplificar tarefas comuns, além de se beneficiar de bugs e casos extremos que você pode não pensar ao escrever seu código.

Embora algumas pessoas considerem um exagero adicionar uma estrutura de ~ 50 KB para simplesmente alterar uma classe, se você estiver realizando uma quantidade substancial de trabalho em JavaScript ou qualquer coisa que possa ter um comportamento incomum entre navegadores, vale a pena considerar.

(Muito grosso modo, uma biblioteca é um conjunto de ferramentas projetadas para uma tarefa específica, enquanto uma estrutura geralmente contém várias bibliotecas e executa um conjunto completo de tarefas.)

Os exemplos acima foram reproduzidos abaixo usando jQuery , provavelmente a biblioteca JavaScript mais comumente usada (embora existam outras que também valem a pena investigar).

(Observe que $aqui está o objeto jQuery.)

Alterando Classes com o jQuery:

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

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

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

Além disso, o jQuery fornece um atalho para adicionar uma classe, se não se aplicar, ou remover uma classe que:

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

Atribuindo uma função a um evento de clique com jQuery:

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

ou, sem precisar de um ID:

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

Você também pode fazer:

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

E para alternar uma classe (remova, se existir, adicione-a):

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

Em um dos meus projetos antigos que não usavam jQuery, criei as seguintes funções para adicionar, remover e verificar se o elemento tem 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, ' ');
    }
}

Então, por exemplo, se eu quiser onclickadicionar alguma classe ao botão, posso usar isso:

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

Agora, com certeza, seria melhor usar o jQuery.

Você pode usar node.classNameassim:

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

Isso deve funcionar no IE5.5 e acima, de acordo com o PPK .

Uau, surpreso, há tantas respostas exageradas aqui ...

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

Usando código JavaScript puro:

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

Isso está funcionando para mim:

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

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

Você também pode estender o objeto HTMLElement, a fim de adicionar métodos para adicionar, remover, alternar e verificar 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);
}

E, em seguida, basta usar assim (ao clicar, irá adicionar ou remover classe):

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

Aqui está uma demonstração .

Apenas para adicionar informações de outra estrutura popular, o Google Closures, veja a classe dom / classes :

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

Uma opção para selecionar o elemento é usar goog.dom.query com um seletor CSS3:

var myElement = goog.dom.query("#MyElement")[0];

Algumas notas menores e ajustes nas regexes anteriores:

Você fará isso globalmente, caso a lista de turmas tenha o nome da turma mais de uma vez. E você provavelmente desejará remover espaços das extremidades da lista de classes e converter vários espaços em um espaço para evitar a execução de espaços. Nenhuma dessas coisas deve ser um problema se o único código que pisca com os nomes de classe usa a regex abaixo e remove um nome antes de adicioná-lo. Mas. Bem, quem sabe quem pode estar brincando com a lista de nomes de turma.

Essa regex não diferencia maiúsculas de minúsculas, de modo que os erros nos nomes das classes podem aparecer antes que o código seja usado em um navegador que não se importa com maiúsculas e minúsculas nos nomes das classes.

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

Altere a classe CSS de um elemento com JavaScript no 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

Eu usaria o jQuery e escreveria algo como isto:

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

Esse código adiciona uma função a ser chamada quando um elemento do id some-element é clicado. A função anexa clicou no atributo de classe do elemento, se ele ainda não faz parte, e o remove, se estiver lá.

Sim, você precisa adicionar uma referência à biblioteca jQuery em sua página para usar esse código, mas pelo menos você pode se sentir confiante de que a maioria das funções da biblioteca funcionaria em praticamente todos os navegadores modernos e economizará tempo implementando seu próprio código para fazer o mesmo.

obrigado

A linha

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

deveria estar:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');

Alterar a classe de um elemento no JavaScript vanilla com suporte ao IE6

Você pode tentar usar a attributespropriedade node para manter a compatibilidade com navegadores antigos, mesmo no 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>

Aqui está a minha versão, funcionando plenamente:

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
}

Uso:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

Aqui está um toggleClass para alternar / adicionar / remover uma classe em um elemento:

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

veja jsfiddle

veja também minha resposta aqui para criar uma nova classe dinamicamente

Eu uso as seguintes funções JavaScript baunilha no meu código. Eles usam expressões regulares e indexOfmas não exigem a citação de caracteres especiais em expressões regulares.

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

Você também pode usar o element.classList em navegadores modernos.

AS OPÇÕES.

Aqui estão alguns exemplos de estilo versus classList para que você veja quais são as opções disponíveis e como usar classListpara fazer o que deseja.

style vs. classList

A diferença entre stylee classListé que com stylevocê está adicionando para as propriedades de estilo do elemento, mas classListestá controlando meio da classe (es) do elemento ( add, remove, toggle, contain), vou mostrar-lhe como usar o adde removemétodo, pois esses são os populares.

Exemplo de estilo

Se você deseja adicionar margin-toppropriedades a um elemento, faça o seguinte:

// 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.

Exemplo classList

Digamos que tenhamos <div class="class-a class-b">, nesse caso, já temos 2 classes adicionadas ao nosso elemento div class-ae class-b, e queremos controlar quais classes removee para qual classe add. Aqui é ondeclassList se torna útil.

Retirar class-b

// Get the Element
const el = document.querySelector('#element');

// Remove class-b style from the element
el.classList.remove("class-b")

Adicionar class-c

// Get the Element
const el = document.querySelector('#element');

// Add class-b style from the element
el.classList.add("class-c")

Apenas pensei em colocar isso em:

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

basta dizer, a myElement.classList="new-class"menos que você precise manter outras classes existentes; nesse caso, você pode usar os classList.add, .removemétodos.

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, acho que, neste caso, você deve usar o jQuery ou escrever seus próprios métodos em javascript puro. Minha preferência é adicionar meus próprios métodos, em vez de injetar todo o jQuery no meu aplicativo, se eu não precisar disso por outros motivos.

Eu gostaria de fazer algo como abaixo como métodos na minha estrutura javascript para adicionar algumas funcionalidades que lidam com a adição de classes, exclusão de classes, etc, semelhantes ao jQuery, isso é totalmente suportado no IE9 +, também meu código está escrito no ES6, então você precisa para garantir que seu navegador o suporte ou você esteja usando algo como babel, caso contrário, use a sintaxe ES5 em seu código, também dessa maneira, encontraremos elemento via ID, o que significa que o elemento precisa ter um ID para ser selecionado:

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

}

e você pode simplesmente chamá-los como abaixo, imagine que seu elemento tem id de 'id' e classe de 'class', certifique-se de passá-los como uma string, você pode usar o utilitário como abaixo:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');

classList API do DOM:

Uma maneira muito conveniente de adicionar e remover classes é a classListAPI do DOM. Essa API nos permite selecionar todas as classes de um elemento DOM específico para modificar a lista usando javascript. Por exemplo:

const el = document.getElementById("main");
console.log(el.classList);

<div class="content wrapper animated" id="main"></div>

Podemos observar no log que estamos recuperando um objeto não apenas com as classes do elemento, mas também com muitos métodos e propriedades auxiliares. Este objeto herda da interface DOMTokenList , uma interface usada no DOM para representar um conjunto de tokens separados por espaço (como classes).

Exemplo:

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>
  

Sim, existem muitas maneiras de fazer isso. Na sintaxe ES6, podemos alcançar facilmente. Use este código para alternar entre adicionar e remover 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>

function classed(el, class_name, add_class) {
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');
}

usando a resposta aceita acima, aqui está uma função simples entre navegadores para adicionar e remover classes

adicionar classe:

classed(document.getElementById("denis"), "active", true)

remover classe:

classed(document.getElementById("denis"), "active", false)

Muitas respostas, muitas boas respostas.

TL; DR:

document.getElementById('id').className = 'class'

OU

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

É isso aí.

E, se você realmente quer saber o porquê e se educar, sugiro ler a resposta de Peter Boughton , é perfeito.

Nota:
Isso é possível com ( documento ou evento ):

• getElementById()
• getElementsByClassName()
• querySelector()
• querySelectorAll()

Existe uma propriedade className em javascript para alterar o nome da classe de um elemento HTML. O valor da classe existente será substituído pelo novo que você atribuiu em className.

<!DOCTYPE html>
<html>
<head>
<title>How to change class of an HTML element in Javascript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />

<center><button id="change-class">Change Class</button></center>

<script>
var change_class=document.getElementById("change-class");
change_class.onclick=function()
{
    var icon=document.getElementById("icon");
    icon.className="fa fa-gear";
}

</script>
</body>
</html>

Crédito - https://jaischool.com/javascript-lang/how-to-change-class-name-of-an-html-element-in-javascript.html

A questão do OP era Como posso alterar a classe de um elemento com JavaScript?

Navegadores modernos permitem fazer isso com uma linha de javascript :

document.getElementById('id').classList.replace('span1','span2')

O classListatributo fornece um DOMTokenList que possui uma variedade de métodos . Você pode operar na classList de um elemento usando manipulações simples como add () , remove () ou replace () . Ou fique muito sofisticado e manipule classes como se fosse um objeto ou Map com chaves () , valores () , entradas ()

A resposta de Peter Boughton é ótima, mas agora tem mais de uma década. Todos os navegadores modernos agora suportam DOMTokenList - consulte https://caniuse.com/#search=classList e até o IE11 suporta alguns métodos DOMTokenList

tentar

element.className='second'

function change(box) { box.className='second' }

.first  { width:  70px; height:  70px; background: #ff0                 }
.second { width: 150px; height: 150px; background: #f00; transition: 1s }

<div onclick="change(this)" class="first">Click me</div>

Código JavaScript de trabalho:

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

Você pode baixar um código de trabalho neste link .

Aqui está um código jQuery simples para fazer isso.

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

Aqui,

• Class1 é um ouvinte para um evento.
• A classe pai é a classe que hospeda a classe que você deseja alterar
• Classtoremove é a classe antiga que você tem.
• Classe a adicionar é a nova classe que você deseja adicionar.
• 100 é o atraso do tempo limite durante o qual a classe é alterada.

Boa sorte.