js 实现addclass
实现 addClass 方法
在 JavaScript 中，可以通过操作元素的 classList 属性来动态添加类名。classList 提供了 add 方法，可以方便地添加一个或多个类名。
function addClass(element, className) {
if (element.classList) {
element.classList.add(className);
} else {
element.className += ' ' + className;
}
}兼容性处理
对于不支持 classList 的老旧浏览器，可以使用字符串拼接的方式实现类似功能：
function addClass(element, className) {
var currentClass = element.className;
if (currentClass.indexOf(className) === -1) {
element.className = currentClass ? currentClass + ' ' + className : className;
}
}批量添加多个类名
如果需要一次性添加多个类名，可以扩展上述方法：
function addClasses(element, classNames) {
classNames.forEach(function(className) {
addClass(element, className);
});
}使用示例
var div = document.getElementById('myDiv');
addClass(div, 'active'); // 添加单个类
addClasses(div, ['active', 'highlight']); // 添加多个类注意事项
- 添加前应检查类名是否已存在，避免重复添加
- 类名之间需要用空格分隔
- 对于 SVG 元素，在某些旧版本浏览器中可能需要特殊处理
替代方案
现代 JavaScript 项目中，可以直接使用 classList API：
document.getElementById('myElement').classList.add('new-class');或者使用 jQuery 的 addClass 方法：
$('#myElement').addClass('new-class');
