我该如何使用JavaScript响应onclick或其他事件来更改HTML元素的类？
现代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');
不幸的是，这些在Internet Explorer 10之前的版本中不起作用，尽管有一个shim可以添加到IE8和IE9，可以从这个页面获取。然而，它得到越来越多的支持。
简单的跨浏览器解决方案
选择元素的标准的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) # 匹配字符串的开头或任何单个空格字符
MyClass # 要删除的类名的字面文本
(?!\S) # 负向前视确保上述内容是整个类名
# 确保后面没有非空格字符
g标志告诉替换重复所需的，以防类名已多次添加。
检查元素是否已经应用了一个类：
与用于删除类的相同正则表达式也可以用于检查特定类是否存在：
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
将这些操作分配给onClick事件：
虽然将JavaScript直接写入HTML事件属性（例如onClick="this.className+=' MyClass'"）是可行的，但这并不是推荐的行为。特别是在更大的应用程序中，通过将HTML标记与JavaScript交互逻辑分离，可以实现更易于维护的代码。
实现这一点的第一步是通过创建一个函数，并在onClick属性中调用该函数，例如：
<script type="text/javascript">
function changeClass(){
// 以上代码示例
}
</script>
...
<button onClick="changeClass()">我的按钮</button>
（这并不要求将这些代码放在script标签中，这只是为了示例的简洁性，并将JavaScript包含在单独的文件中可能更合适。）
第二步是将onClick事件从HTML中移出，放入JavaScript中，例如使用addEventListener。
<script type="text/javascript">
function changeClass(){
// 以上代码示例
}
window.onload = function(){
document.getElementById("MyElement").addEventListener( 'click', changeClass);
}
</script>
...
<button id="MyElement">我的按钮</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);