js的classList往里面加样式
时间: 2023-11-27 09:52:54 浏览: 83
classcat:快速构建类属性字符串
可以通过`add()`方法向元素的classList中添加一个或多个CSS类名,从而为元素添加样式。例如,以下代码将向id为myElement的元素添加class为"active"和"class2"的样式:
```javascript
var myElement = document.getElementById("myElement");
myElement.classList.add("active", "class2");
```
这将在元素上添加以下类名:
```html
<div id="myElement" class="active class2"></div>
```
如果要从元素的classList中删除类名,可以使用`remove()`方法。例如,以下代码将从id为myElement的元素中删除class为"active"的样式:
```javascript
var myElement = document.getElementById("myElement");
myElement.classList.remove("active");
```
这将在元素的class属性中移除"active"类名:
```html
<div id="myElement" class="class2"></div>
```
你也可以使用`toggle()`方法来添加或删除类名。如果类名已经存在,则该方法将从元素的classList中删除该类名。否则,它将向classList中添加该类名。例如,以下代码将在单击元素时切换class为"active"的样式:
```javascript
var myElement = document.getElementById("myElement");
myElement.addEventListener("click", function() {
this.classList.toggle("active");
});
```
阅读全文