js实现addClass添加样式

今天和大家分享如何用原生js实现添加样式功能

jQuery里封装的有addClass函数，调用十分方便，那么用JS如何实现呢，下面我们来介绍下。

首先是CSS部分

写一个新的class用来添加

HTML部分

一个没有样式的div

script部分

声明addClass函数，把标签元素和新的class作为参数传进去，进行判断，如果标签元素原来有样式，那么就增加一个样式，如果没有样式，那么就把标签元素的样式设为传进来的样式。

调用函数，这样就实现了样式的添加。

更多前端内容 请 点击关注 点击关注

以给 body 标签添加 class 为例

通过 jQuery

$( 'body').addClass( 'class1 class2' )

$( 'body' ).removeClass( 'class1 class2' )

支持 classList 的高级浏览器（IE10+，Chrome，Firefox，Safari）

document.body.classList.add( 'class1', 'class2' )

document.body.classList.remove( 'class1', 'class2' )

不支持 classList 的浏览器只能通过 className 来添加

document.body.className += ' class1 class2'

其实只需要用到document.querySelector('选择器')和结合classList. add("类名"）即可。

那么你这里就只要设置以下两步代码即可:

document.querySelector('# room＞div'). classList. add(" test"）

document.querySelector('# room＞div＞input'). classList. add(" test2"）

---