如何使用JavaScript更改HTML元素的类以响应onclick或任何其他事件？
当前回答
用于更改类的现代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);
其他回答
我会使用jQuery编写如下内容：
jQuery(function($) {
$("#some-element").click(function() {
$(this).toggleClass("clicked");
});
});
这段代码添加了一个函数，当单击id some元素的元素时调用该函数。如果元素的class属性还不是它的一部分，则该函数会将单击的内容追加到该元素的class特性中，如果它存在，则会将其删除。
是的，您确实需要在页面中添加对jQuery库的引用才能使用这段代码，但至少您可以确信库中的大多数函数都可以在几乎所有现代浏览器上运行，并且这将节省您实现自己代码的时间。
用于更改类的现代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);
可以这样使用node.className：
document.getElementById('foo').className = 'bar';
根据PPK，这应该在Internet Explorer 5.5及更高版本中工作。
4种可能的操作：添加、删除、检查和切换
让我们看看每个操作的多种方式。
1.添加类
方法1：在现代浏览器中添加类的最佳方法是使用元素的classList.add（）方法。
案例1：添加单个类函数addClass（）{let element=document.getElementById（'id1'）；//添加类element.classList.add（'beautify'）；}案例2：添加多个类在add（）方法中通过逗号添加多个类函数addClass（）{let element=document.getElementById（'id1'）；//添加多个类element.classList.add（'class1'，'class2'，'class3'）；}
方法2-您还可以使用className属性向HTML元素添加类。
案例1：重写预先存在的类当您将新类分配给className属性时，它将覆盖上一个类。函数addClass（）{let element=document.getElementById（'id1'）；//添加多个类element.className=“美化”；}案例2：添加类而不覆盖对类使用+=运算符不覆盖以前的类。此外，在新类之前添加额外的空间。函数addClass（）{let element=document.getElementById（'id1'）；//添加单个多个类element.className+=“美化”；//添加多个类element.className+=“class1 class2 class3”；}
2.删除类
方法1-从元素中移除类的最佳方法是classList.remove（）方法。
案例1：删除单个类只需在方法中传递要从元素中删除的类名。函数removeClass（）{let element=document.getElementById（'id1'）；//删除类element.classList.remove（'beautify'）；}案例2：删除多个类传递用逗号分隔的多个类。函数removeClass（）{let element=document.getElementById（'id1'）；//删除类element.classList.remove（'class1'，'class2'，'class3'）；}
方法2-您也可以使用className方法删除类。
案例1：删除单个类如果元素只有一个类，并且您想要删除它，那么只需为className方法分配一个空字符串。函数removeClass（）{let element=document.getElementById（'id1'）；//删除类element.className=“”；}案例2：删除多个类如果元素有多个类，首先使用className属性从元素中获取所有类，然后使用replace方法，用空字符串替换所需的类，最后将其分配给元素的className属性。函数removeClass（）{let element=document.getElementById（'id1'）；//删除类element.className=element.cclassName.replace（'class1'，''）；}
3.检查类别
要检查元素中是否存在类，只需使用classList.contains（）方法即可。如果类存在，则返回true，否则返回false。
function checkClass() {
let element = document.getElementById('id1');
// checking class
if(element.classList.contains('beautify') {
alert('Yes! class exists');
}
}
4.切换类
要切换类，请使用classList.tggle（）方法。
function toggleClass() {
let element = document.getElementById('id1');
// toggle class
element.classList.toggle('beautify');
}
线路
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')
应该是：
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');
推荐文章
- 检测用户何时离开网页的最佳方法?
- 当“模糊”事件发生时，我如何才能找到哪个元素的焦点去了*到*?
- HTML的“nonce”属性用于脚本和样式元素的目的是什么?
- React不会加载本地图像
- 我如何在HTML中创建一个泪滴?
- 如何将Blob转换为JavaScript文件
- 在另一个js文件中调用JavaScript函数
- 如何在svg元素中使用z索引?
- 如何求一个数的长度?
- 跨源请求头(CORS)与PHP头
- 如何用Express/Node以编程方式发送404响应?
- parseInt(null, 24) === 23…等等,什么?
- JavaScript变量声明在循环外还是循环内?
- 我怎么能强迫一个长字符串没有任何空白被包装?
- 元素在“for(…in…)”循环中排序
