如何使用JavaScript更改HTML元素的类以响应onclick或任何其他事件?


当前回答

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/','');
function classed(el, class_name, add_class) {
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');
}

使用PeterBoughton的答案,这里有一个简单的跨浏览器函数来添加和删除类。

添加类:

classed(document.getElementById("denis"), "active", true)

删除类:

classed(document.getElementById("denis"), "active", false)

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

在支持Internet Explorer 6的普通JavaScript中更改元素的类

您可以尝试使用node attributes属性来保持与旧浏览器(甚至Internet Explorer 6)的兼容性:

函数getClassNode(元素){对于(var i=element.attributes.length;i-;)if(element.attributes[i].nodeName=='class')return元素.attributes[i];}函数removeClass(classNode,className){var索引,classList=classNode.value.split(“”);如果((index=classList.indexOf(className))>-1){classList.拼接(索引,1);classNode.value=classList.join(“”);}}函数hasClass(classNode,className){return classNode.value.indexOf(className)>-1;}函数addClass(classNode,className){if(!hasClass(classNode,className))classNode.value+=“”+className;}document.getElementById('message').addEventListener('click',function(){var classNode=getClassNode(this);var className=hasClass(classNode,“red”)&&“blue”| |“red”;removeClass(classNode,'red');removeClass(classNode,'blue');addClass(classNode,className);}).红色{颜色:红色;}.红色:之前{内容:“我红了!”;}.红色:之后{content:'再次';}.蓝色{颜色:蓝色;}.蓝色:之前{内容:“我是蓝色的!”}<span id=“message”class=“”>单击我</span>

classList DOM API:

添加和删除类的一种非常方便的方式是classListDOMAPI。该API允许我们选择特定DOM元素的所有类,以便使用JavaScript修改列表。例如:

const el=document.getElementById(“main”);console.log(el.classList);<div class=“content wrapper animated”id=“main”></div>

我们可以在日志中观察到,我们正在取回一个对象,它不仅包含元素的类,还包含许多辅助方法和财产。此对象继承自接口DOMTokenList,该接口在DOM中用于表示一组空格分隔的令牌(如类)。

例子:

const el=document.getElementById('container');函数addClass(){el.classList.add('newclass');}函数replaceClass(){el.classList.replace('fo','newFoo');}函数removeClass(){el.classList.remove('bar');}按钮{边距:20px;}.foo文件{颜色:红色;}.newFoo{颜色:蓝色;}.巴{背景色:粉蓝色;}.new类{边框:2px实心绿色;}<div class=“foo bar”id=“container”>“全身出汗”在natus error sit volupatim accusantium doloremque audantium,totam rem开胃酒,eaque ipsa quae ab illo inventore veritatis et准建筑风格的生活格言不明确。Nemo enim ipsam公司卷舌</div><button onclick=“addClass()”>addClass</button><button onclick=“replaceClass()”>replaceClass</button><button onclick=“removeClass()”>removeClass</button>