OP的问题是如何使用JavaScript更改元素的类？

现代浏览器允许您使用一行JavaScript实现这一点：

document.getElementById（'id'）.classList.replace（'span1'，'span2'）

classList属性提供了具有多种方法的DOMTokenList。可以使用add（）、remove（）或replace（）等简单操作对元素的classList进行操作。或者像使用key（）、values（）和entries（）来处理对象或Map那样使用非常复杂的类。

彼得·布顿（Peter Boughton）的回答很好，但现在已经超过十年了。所有现代浏览器现在都支持DOMTokenList-请参阅https://caniuse.com/#search=classList甚至Internet Explorer 11也支持一些DOMTokenList方法。

这对我很有用：

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

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

TL；博士：

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

OR

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

就是这样。

而且，如果你真的想知道原因并教育自己，那么我建议阅读彼得·布顿的答案。太完美了。

注：

这可以通过（文档或事件）实现：

按ID获取元素（）getElementsByClassName（）查询选择器（）查询选择器全部（）

在ASP.NET中使用JavaScript更改元素的CSS类：

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

哇，奇怪这里有这么多过分的答案。。。

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

这里有一个toggleClass来切换/添加/删除元素上的类：

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

参见JSFiddle。

也可以在这里看到动态创建新类的答案。