对之前的正则表达式进行了一些小注释和调整：

如果类列表不止一次包含类名，则需要全局执行该操作。而且，您可能希望从类列表的末尾去掉空格，并将多个空格转换为一个空格，以防止出现空格。如果只有使用类名的代码使用下面的正则表达式并在添加名称之前删除名称，那么这些都不会是问题。好吧，谁知道谁可能在篡改班级名单。

这个正则表达式是不区分大小写的，所以在不考虑类名中的大小写的浏览器上使用代码之前，可能会出现类名中的错误。

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

可以这样使用node.className：

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

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

用于更改类的现代HTML5技术

现代浏览器增加了classList，它提供了一些方法，可以在不需要库的情况下更容易地操作类：

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

不幸的是，这些在v10之前的Internet Explorer中不起作用，尽管有一个垫片可以将其添加到IE8和IE9中，可从该页面获得。不过，它得到了越来越多的支持。

简单的跨浏览器解决方案

选择元素的标准JavaScript方法是使用document.getElementById（“Id”），这是下面的示例所使用的-当然，您可以通过其他方式获取元素，在正确的情况下，可以直接使用它-但是，详细讨论这一点超出了答案的范围。

要更改元素的所有类，请执行以下操作：

要用一个或多个新类替换所有现有类，请设置className属性：

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

（可以使用空格分隔的列表来应用多个类。）

要向元素添加其他类，请执行以下操作：

要在不删除/影响现有值的情况下将类添加到元素，请附加一个空格和新类名，如下所示：

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

要从元素中删除类，请执行以下操作：

要在不影响其他潜在类的情况下将单个类删除到元素，需要简单的正则表达式替换：

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

此正则表达式的解释如下：

(?:^|\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 the end of the string or space)

g标志告诉replace根据需要重复，以防类名被多次添加。

要检查类是否已应用于元素，请执行以下操作：

上面用于删除类的相同正则表达式也可以用作检查特定类是否存在：

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

### Assigning these actions to onClick events:

虽然可以直接在HTML事件属性中编写JavaScript（例如onClick=“this.className+='MyClass'”），但这不是推荐的行为。特别是在大型应用程序上，通过将HTML标记与JavaScript交互逻辑分离，可以实现更易于维护的代码。

实现这一点的第一步是创建一个函数，并调用onClick属性中的函数，例如：

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

（不需要在脚本标记中包含此代码，这只是为了示例的简洁，将JavaScript包含在不同的文件中可能更合适。）

第二步是将onClick事件移出HTML并移入JavaScript，例如使用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>

（请注意，window.onload部分是必需的，以便在HTML完成加载后执行该函数的内容-如果没有这一点，调用JavaScript代码时MyElement可能不存在，因此该行将失败。）

JavaScript框架和库

以上代码都是标准JavaScript代码，但是，通常使用框架或库来简化常见任务，并从编写代码时可能想不到的固定错误和边缘情况中获益。

虽然有些人认为添加一个~50KB的框架来简单地更改一个类是过分的，但如果您正在做大量的JavaScript工作或任何可能具有异常跨浏览器行为的事情，那么它非常值得考虑。

（非常粗略地说，库是为特定任务设计的一组工具，而框架通常包含多个库并执行一整套任务。）

下面使用jQuery复制了上面的示例，jQuery可能是最常用的JavaScript库（尽管还有其他值得研究的）。

（注意这里的$是jQuery对象。）

使用jQuery更改类：

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

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

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

此外，jQuery提供了一个快捷方式，可以在类不适用时添加该类，或者删除具有以下功能的类：

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

### Assigning a function to a click event with jQuery:

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

或者，不需要id：

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

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

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

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>

在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