用于更改类的现代 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 中不起作用，尽管有一个 shim 来添加对 IE8 和 IE9 的支持，可从 this page 获得。不过，supported 越来越多。
简单的跨浏览器解决方案
选择元素的标准 JavaScript 方法是使用 document.getElementById("Id")，这就是以下示例所使用的 - 当然您可以通过其他方式获取元素，并且在正确的情况下可以简单地使用 this 代替 - 但是，对此进行详细说明超出了答案的范围。
更改一个元素的所有类：
要将所有现有类替换为一个或多个新类，请设置 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 标志告诉替换根据需要重复，以防类名被多次添加。
检查一个类是否已经应用于一个元素：
上面用于删除类的相同正则表达式也可用于检查特定类是否存在：
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
### 将这些操作分配给 onclick 事件：
虽然可以直接在 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 编写的，但是，通常的做法是使用框架或库来简化常见任务，并从编写时可能不会想到的固定错误和边缘情况中受益代码。
虽然有些人认为添加一个大约 50 KB 的框架来简单地更改一个类是多余的，但如果您正在执行大量的 JavaScript 工作或任何可能具有异常跨浏览器行为的事情，那么值得考虑。
（非常粗略地说，库是为特定任务设计的一组工具，而框架通常包含多个库并执行一组完整的职责。）
上面的示例已在下面使用jQuery 进行了复制，这可能是最常用的 JavaScript 库（尽管还有其他值得研究的库）。
（注意这里的$是jQuery对象。）
用 jQuery 改变类：
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
此外，jQuery 提供了一个快捷方式，用于添加不适用的类，或删除适用的类：
$('#MyElement').toggleClass('MyClass');
### 使用 jQuery 将函数分配给单击事件：
$('#MyElement').click(changeClass);
或者，不需要 id：
$(':button:contains(My Button)').click(changeClass);