如何在Js中给元素添加class类名

如何在Js中给元素添加class类名

有时候我们不仅是用css添加样式,我们还可以通过Js来控制.下面来跟我一起看看吧!

新建一个Html文件.先设计结构.代码如下:

添加类名

移出类名

通过Button点击事件来控制div

然后是样式设计:

.color和.bgc是点击后要新加的样式

下图是最初始的显示效果

下面是js(记得放在body下面哦):

下图是点击"添加类名"按钮后的显示效果

这里主要用到的就是元素.classList.add('类名')和元素.classList.remove('类名').

除此之外,我们还可以一次添加多个类名和一次去除多个类名.代码如下.

//oDiv.classList.remove('color','bgc')

//oDiv.classList.add('color','bgc')

赶快试试吧!