原生js添加类名详解

在web开发中，我们会经常用到给HTML元素添加类名的操作。原生的js提供了几种方法可以完成该操作，本文将从多个角度详细讲解每种方法的用法和优缺点。

一、原生js添加类名的方法

原生js提供了以下几种方法用于向HTML元素添加类名：

element.className element.classList.add() element.classList.toggle() element.classList.remove()

接下来，我们将逐一讲解每种方法的用法和优缺点。

二、element.className

element.className 是原生js添加类名的最基础方法。它允许你向元素的classed属性添加一个或多个类名。

以下是通过element.className向元素添加类名的示例代码：

  
    var element = document.getElementById('myElement');
    element.className += ' myClass';

上述代码将向id为 "myElement" 的元素添加 "myClass" 这个类名。需要注意的是，className属性只能替换元素的全部类名，而无法只替换其中的某个类名。

当需要替换一个元素中的一个类名时，需要先通过 String 对象的 replace() 方法将原来的类名替换成新的类名。代码示例如下：

  
    var element = document.getElementById('myElement');
    element.className = element.className.replace('oldClass', 'newClass');

上述代码将替换 "myElement" 元素的 "oldClass" 类名为 "newClass" 类名。

虽然 element.className 是原生js添加类名的基础方法，但是由于它只能替换元素的全部类名且语义化差，使用时应尽量避免。

三、element.classList.add()

element.classList.add() 方法可以向 HTML 元素的 class 属性中添加一个或多个类名。

以下是通过element.classList.add()向元素添加类名的示例代码：

  
    var element = document.getElementById('myElement');
    element.classList.add('myClass');

上述代码将向id为 "myElement" 的元素添加 "myClass" 这个类名。注意，element.classList.add() 方法可以在元素中添加多个类名，可以将多个类名通过逗号分隔的形式添加到该方法中。

另外，element.classList.add() 方法还可以接受多个参数，每个参数都代表一个要添加的类名。代码示例如下：

  
    var element = document.getElementById('myElement');
    element.classList.add('myClass1', 'myClass2', 'myClass3');

上述代码将向id为 "myElement" 的元素分别添加 "myClass1"、"myClass2"、"myClass3" 这三个类名。

四、element.classList.toggle()

通过 element.classList.toggle() 方法可以为 HTML 元素的 class 属性添加或删除一个或多个类名。

以下是通过element.classList.toggle() 向元素添加或删除类名的示例代码：

  
    var element = document.getElementById('myElement');
    element.classList.toggle('myClass');

上述代码将判断id为 "myElement" 的元素是否包含 "myClass" 这个类名，如果元素没有这个类名，就将这个类名添加到元素的class属性中，如果元素已经存在这个类名，就将这个类名从元素的class属性中移除。

另外，element.classList.toggle() 方法还可以接受第二个参数用于指定是否应该添加或移除类名，代码示例如下：

  
    var element = document.getElementById('myElement');
    element.classList.toggle('myClass', true); // 添加类名
    element.classList.toggle('myClass', false); // 移除类名

五、element.classList.remove()

通过 element.classList.remove() 方法可以从 HTML 元素的 class 属性中删除一个或多个类名。

以下是通过element.classList.remove() 从元素中删除类名的示例代码：

  
    var element = document.getElementById('myElement');
    element.classList.remove('myClass');

上述代码将从id为 "myElement" 的元素的 class 属性中移除 "myClass" 这个类名。

与 element.classList.add() 方法一样，element.classList.remove() 也可以接受多个参数，每个参数代表一个要从 HTML 元素的 class 属性中移除的类名。代码示例如下：

  
    var element = document.getElementById('myElement');
    element.classList.remove('myClass1', 'myClass2', 'myClass3');

上述代码将从id为 "myElement" 的元素的 class 属性中移除 "myClass1"、"myClass2"、"myClass3" 这三个类名。

六、总结

以上就是常用的四种原生js添加类名的方法，除了使用 element.className 的兼容性好一些外，其余三种方法均已得到广泛应用。

在实际开发中，建议首先选择使用 element.classList.add() 方法，尽量避免使用 element.className 和 element.classList.remove() 方法。当需要在添加或删除类名时进行判断时，可以使用 element.classList.toggle() 方法。