如何在没有 jQuery 的情况下在 Javascript 中添加和删除类答案
How to add and remove classes in Javascript without jQuery如何在没有 jQuery 的情况下在 Javascript 中添加和删除类我正在寻找一种快速且安全的方法来在不使用 jQuery 的情况下从 html 元素中添加和删除类。
它也应该在早期的 IE（IE8 及更高版本）中工作。
【问题讨论】：
classList shim on MDN 对于 IE>7
标签： javascript html
另一种使用纯 JavaScript 将类添加到元素的方法
添加类：
document.getElementById("div1").classList.add("classToBeAdded");
移除类：
document.getElementById("div1").classList.remove("classToBeRemoved");
注意：但在 IE 中不受支持
【讨论】：
以下 3 个函数在不支持 classList 的浏览器中工作：
function hasClass(el, className)
{
if (el.classList)
return el.classList.contains(className);
return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}
function addClass(el, className)
{
if (el.classList)
el.classList.add(className)
else if (!hasClass(el, className))
el.className += " " + className;
}
function removeClass(el, className)
{
if (el.classList)
el.classList.remove(className)
else if (hasClass(el, className))
{
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
el.className = el.className.replace(reg, ' ');
}
}
https://jaketrent.com/post/addremove-classes-raw-javascript/
【讨论】：
IE10 onwards，问题状态为IE8 and up。
为了以后的友好，我推荐使用 polyfill/shim 的 classList：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#wrapper
var elem = document.getElementById( 'some-id' );
elem.classList.add('some-class'); // Add class
elem.classList.remove('some-other-class'); // Remove class
elem.classList.toggle('some-other-class'); // Add or remove class
if ( elem.classList.contains('some-third-class') ) { // Check for class
console.log('yep!');
}
【讨论】：
classList 从 IE10 开始可用，如果可以，请使用它。
element.classList.add("something");
element.classList.remove("some-class");
【讨论】：
我很困惑这里的答案明显提到了非常有用的 DOMTokenList.prototype.toggle 方法，它确实简化了很多代码。
例如您经常会看到执行此操作的代码：
if (element.classList.contains(className) {
element.classList.remove(className)
} else {
element.classList.add(className)
}
这可以用一个简单的调用来替换
element.classList.toggle(className)
在许多情况下也很有帮助，如果您基于条件添加或删除类名，您可以将该条件作为第二个参数传递。如果该参数是真的，toggle 充当add，如果它是假的，它就好像你调用了remove。
element.classList.toggle(className, condition) // add if condition truthy, otherwise remove
【讨论】：
要在没有 JQuery 的情况下添加类，只需将 yourClassName 附加到您的元素 className
document.documentElement.className += " yourClassName";
要删除类，您可以使用replace() 函数
document.documentElement.className.replace(/(?:^|\s)yourClassName(?!\S)/,'');
正如@DavidThomas 提到的，如果您想将类名动态传递给替换函数，则需要使用new RegExp() 构造函数。
【讨论】：
new RegExp() 构造函数。
\b 在 RegExp 中是不够的，因为在类名中存在有效的边界字符。 /\bfoo\b/ 将替换 "foo-bar" 类的第一部分。
添加和删除类（在 IE8+ 上测试）
将 trim() 添加到 IE（取自：.trim() in JavaScript not working in IE）
if(typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
}
添加和删除类：
function addClass(element,className) {
var currentClassName = element.getAttribute("class");
if (typeof currentClassName!== "undefined" && currentClassName) {
element.setAttribute("class",currentClassName + " "+ className);
}
else {
element.setAttribute("class",className);
}
}
function removeClass(element,className) {
var currentClassName = element.getAttribute("class");
if (typeof currentClassName!== "undefined" && currentClassName) {
var class2RemoveIndex = currentClassName.indexOf(className);
if (class2RemoveIndex != -1) {
var class2Remove = currentClassName.substr(class2RemoveIndex, className.length);
var updatedClassName = currentClassName.replace(class2Remove,"").trim();
element.setAttribute("class",updatedClassName);
}
}
else {
element.removeAttribute("class");
}
}
用法：
var targetElement = document.getElementById("myElement");
addClass(targetElement,"someClass");
removeClass(targetElement,"someClass");
一个工作的 JSFIDDLE： http://jsfiddle.net/fixit/bac2vuzh/1/
【讨论】：
试试这个：
const element = document.querySelector('#elementId');
if (element.classList.contains("classToBeRemoved")) {
element.classList.remove("classToBeRemoved");
}
【讨论】：
我正在使用这个简单的代码来完成这个任务：
CSS 代码
.demo {
background: tomato;
color: white;
}
Javascript 代码
function myFunction() {
/* Assign element to x variable by id */
var x = document.getElementById('para);
if (x.hasAttribute('class') {
x.removeAttribute('class');
} else {
x.setAttribute('class', 'demo');
}
}
【讨论】：
add 方法不添加重复的类，remove 方法只删除字符串完全匹配的类。
const addClass = (selector, classList) => {
const element = document.querySelector(selector);
const classes = classList.split(' ')
classes.forEach((item, id) => {
element.classList.add(item)
})
}
const removeClass = (selector, classList) => {
const element = document.querySelector(selector);
const classes = classList.split(' ')
classes.forEach((item, id) => {
element.classList.remove(item)
})
}
addClass('button.submit', 'text-white color-blue') // add text-white and color-blue classes
removeClass('#home .paragraph', 'text-red bold') // removes text-red and bold classes
【讨论】：
当你从等式中删除 RegExp 时，你会留下一个不太“友好”的代码，但它仍然可以通过 split() 的（很多）不太优雅的方式来完成。
function removeClass(classString, toRemove) {
classes = classString.split(' ');
var out = Array();
for (var i=0; i<classes.length; i++) {
if (classes[i].length == 0) // double spaces can create empty elements
continue;
if (classes[i] == toRemove) // don't include this one
continue;
out.push(classes[i])
}
return out.join(' ');
}
这个方法比一个简单的replace()要大很多，但至少它可以在旧浏览器上使用。如果浏览器甚至不支持 split() 命令，使用原型添加它相对容易。
【讨论】：
以防万一有人需要在单击时切换类并仅在 JS 中的其他元素上删除。您可以尝试执行以下操作：
var accordionIcon = document.querySelectorAll('.accordion-toggle');
//add only on first element, that was required in my case
accordionIcon[0].classList.add('close');
for (i = 0; i < accordionIcon.length; i++) {
accordionIcon[i].addEventListener("click", function(event) {
for (i = 0; i < accordionIcon.length; i++) {
if(accordionIcon[i] !== event.target){
accordionIcon[i].classList.remove('close');
}
event.target.classList.toggle("close");
}
})
}
【讨论】：
你也可以这样做
elem.classList[test ? 'add' : 'remove']('class-to-add-or-remove');
代替
if (test) {
elem.classList.add('class-to-add-or-remove');
} else {
elem.classList.remove('class-to-add-or-remove');
}
【讨论】：