可以这样使用node.className：

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

根据PPK，这应该在Internet Explorer 5.5及更高版本中工作。

对于jQuery这样的库，这是最简单的：

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

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>

这是我的版本，完全可用：

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
}

用法：

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

classList DOM API：

添加和删除类的一种非常方便的方式是classListDOMAPI。该API允许我们选择特定DOM元素的所有类，以便使用JavaScript修改列表。例如：

const el=document.getElementById（“main”）；console.log（el.classList）；<div class=“content wrapper animated”id=“main”></div>

我们可以在日志中观察到，我们正在取回一个对象，它不仅包含元素的类，还包含许多辅助方法和财产。此对象继承自接口DOMTokenList，该接口在DOM中用于表示一组空格分隔的令牌（如类）。

例子：

const el=document.getElementById（'container'）；函数addClass（）{el.classList.add（'newclass'）；}函数replaceClass（）{el.classList.replace（'fo'，'newFoo'）；}函数removeClass（）{el.classList.remove（'bar'）；}按钮{边距：20px；}.foo文件{颜色：红色；}.newFoo{颜色：蓝色；}.巴{背景色：粉蓝色；}.new类{边框：2px实心绿色；}<div class=“foo bar”id=“container”>“全身出汗”在natus error sit volupatim accusantium doloremque audantium，totam rem开胃酒，eaque ipsa quae ab illo inventore veritatis et准建筑风格的生活格言不明确。Nemo enim ipsam公司卷舌</div><button onclick=“addClass（）”>addClass</button><button onclick=“replaceClass（）”>replaceClass</button><button onclick=“removeClass（）”>removeClass</button>

我在代码中使用了以下普通JavaScript函数。它们使用正则表达式和indexOf，但不需要在正则表达式中引用特殊字符。

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

您也可以在现代浏览器中使用element.classList。

Try:

element.className='second'

函数更改（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”>单击我</div>