原生js添加类名

在原生JavaScript中，我们可以使用各种方式来添加类名。下面将介绍几种方法。

1. getElementById() 方法：通过该方法获取到 HTML 元素，然后使用 className 属性来添加类名。

```javascript var element = document.getElementById("myElement"); element.className += " newClass"; ```

2. getElementsByClassName() 方法：通过该方法获取到具有指定类名的所有元素，然后使用循环遍历并添加类名。

```javascript var elements = document.getElementsByClassName("myClass"); for (var i = 0; i < elements.length; i++) { elements[i].className += " newClass"; } ```

3. querySelector() 和 querySelectorAll() 方法：通过这两个方法可以使用 CSS 选择器来获取元素，并添加类名。

```javascript var element = document.querySelector("#myElement"); element.className += " newClass";

var elements = document.querySelectorAll(".myClass"); for (var i = 0; i < elements.length; i++) { elements[i].className += " newClass"; } ```

4. classList 属性：classList 属性提供了一组方法来添加、删除和切换类名。

```javascript var element = document.getElementById("myElement"); element.classList.add("newClass"); ```

5. setAttribute() 方法：通过此方法可以设置元素的属性，包括类名。

```javascript var element = document.getElementById("myElement"); element.setAttribute("class", "newClass"); ```

总结： 以上是在原生JavaScript中添加类名的几种常见方法。可以根据实际情况选择最合适的方法。在现代的Web开发中，更常用的是使用 classList 属性，因为它提供了更多的灵活性和便捷性。无论选择哪种方法，都可以轻松地添加类名，以实现样式的修改和元素的操作。