js实现removeclass
使用 classList 方法
现代浏览器支持 classList 属性，提供 remove() 方法直接移除指定类名。适用于单个或多个类名的移除。
// 移除单个类名
element.classList.remove('className');
// 移除多个类名
element.classList.remove('class1', 'class2');使用 className 和正则表达式
通过修改 className 属性，结合正则表达式替换目标类名。兼容性较好，但需注意处理多余空格。
function removeClass(element, className) {
element.className = element.className.replace(
new RegExp('(^|\\s)' + className + '(\\s|$)', 'g'),
' '
).trim();
}使用 jQuery 方法
如果项目中已引入 jQuery，可直接使用其 removeClass() 方法，支持链式调用和多个类名操作。
// 移除单个类名
$('#element').removeClass('className');
// 移除多个类名
$('#element').removeClass('class1 class2');处理 SVG 元素的类名
SVG 元素需使用 getAttribute() 和 setAttribute() 操作类名，因为部分旧版浏览器不支持 SVG 的 classList。
var svgElement = document.getElementById('svg-element');
var classes = svgElement.getAttribute('class').split(' ');
classes = classes.filter(cls => cls !== 'targetClass');
svgElement.setAttribute('class', classes.join(' ').trim());注意事项
- 移除不存在的类名不会报错。
- 使用正则表达式方法时需转义特殊字符。
- 多次移除同类名时，
classList性能优于字符串操作。 - 批量操作建议使用
document.querySelectorAll()遍历元素。
