当前位置：首页 > JavaScript

js实现addclassname

2026-03-14 07:52:37JavaScript

使用 classList 添加类名

通过元素的 classList 属性可以方便地操作类名，add() 方法用于添加一个或多个类名。

const element = document.getElementById('example');
element.classList.add('new-class');

可以一次添加多个类名，用逗号分隔。

element.classList.add('class1', 'class2', 'class3');

使用 className 属性添加类名

如果元素已有类名，可以通过 className 属性追加新的类名，注意保留原有类名。

js实现addclassname

const element = document.getElementById('example');
element.className += ' new-class';

确保在追加类名前添加空格，避免与现有类名连在一起。

element.className = element.className + ' new-class';

使用正则表达式检查并添加类名

在添加类名前检查是否已存在，避免重复添加。

js实现addclassname

const element = document.getElementById('example');
if (!element.className.match(/(^|\s)new-class(\s|$)/)) {
  element.className += ' new-class';
}

封装为可复用的函数

将添加类名的逻辑封装成函数，方便多次调用。

function addClassName(element, className) {
  if (element.classList) {
    element.classList.add(className);
  } else if (!element.className.match(new RegExp('(^|\\s)' + className + '(\\s|$)'))) {
    element.className += ' ' + className;
  }
}

兼容性处理

对于不支持 classList 的老版本浏览器，可以降级使用 className 属性。

const element = document.getElementById('example');
if (element.classList) {
  element.classList.add('new-class');
} else {
  element.className += ' new-class';
}