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

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

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

可以这样使用node.className：

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

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

在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

好的，我认为在这种情况下，您应该使用jQuery或用纯JavaScript编写自己的方法。我的首选是添加我自己的方法，而不是将所有jQuery注入到我的应用程序中，如果我出于其他原因不需要的话。

我想在我的JavaScript框架中添加一些处理添加类、删除类等的功能。类似于jQuery，IE9+完全支持这一点。另外，我的代码是用ES6编写的，所以您需要确保浏览器支持它，或者使用类似Babel的语言，否则需要在代码中使用ES5语法。同样通过这种方式，我们通过ID查找元素，这意味着元素需要有一个要选择的ID：

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

}

您可以简单地使用它们，如下所示。假设元素的id为“id”，类为“class”。确保将它们作为字符串传递。您可以按如下方式使用该实用程序：

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

这里有一个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。

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

无意冒犯，但动态更改类是不清楚的，因为它迫使CSS解释器重新计算整个网页的视觉呈现。

原因是CSS解释器几乎不可能知道是否可以更改任何继承或级联，因此简单的答案是：

永远不要动态更改className！-）

但通常只需要更改一两个属性，这很容易实现：

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}