如何使用JavaScript更改HTML元素的类以响应onclick或任何其他事件？
当前回答
在我的一个不使用jQuery的旧项目中，我构建了以下函数，用于添加、删除和检查元素是否具有类：
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
if (!hasClass(ele, cls))
ele.className += " " + cls;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
因此，例如，如果我想onclick向按钮添加一些类，我可以使用这个：
<script type="text/javascript">
function changeClass(btn, cls) {
if(!hasClass(btn, cls)) {
addClass(btn, cls);
}
}
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>
现在可以肯定，使用jQuery会更好。
其他回答
你也可以这样做：
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');
要切换类（如果存在则删除，否则添加）：
document.getElementById('id').classList.toggle('class');
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/','');
这里有一个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。
也可以在这里看到动态创建新类的答案。
JavaScript中有一个属性className，用于更改HTML元素类的名称。现有的类值将替换为您在className中分配的新类值。
<!DOCTYPE html>
<html>
<head>
<title>How can I change the class of an HTML element in JavaScript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />
<center><button id="change-class">Change Class</button></center>
<script>
var change_class = document.getElementById("change-class");
change_class.onclick = function()
{
var icon=document.getElementById("icon");
icon.className = "fa fa-gear";
}
</script>
</body>
</html>
Credit-如何在JavaScript中更改HTML元素的类名
