classList与className 区别

js可以通过 className 属性动态获取或者设置元素的 class 属性值。

进而达到动态设置元素外观的功能,由于class是js中的关键字。

所以没有使用class作为dom对象属性,而是使用className替代。HTML5新增classList属性,同样可以操作元素class属性。

 className设置、修改元素样式属性
在之前我们修改样式属性是直接使用style属性来修改,如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式,可以同时修改多个样式。


注意:

1、由于class是关键字,所以使用className去代替

2、className是使用新值换旧值,如果需要添加一个类,就需要保留之前的类名

3、可以同时指定多个样式类名,以空格分隔,空格的数量>=1

4、className的缺点:会覆盖元素之前的样式,所以在以后使用插件或者框架的时候,我们往往并不是很方便的知道当前元素之前加了什么样式,意味着我们在使用calssName的时候,风险很大,如果你能确定元素就是一个样式,那么就可以使用className。

具体使用:

classList设置、修改元素样式属性

为了解决className容易覆盖以前的类名,我们可以通过classList的方式追加和删除类名

注意:

1、classList不会修改元素之前所用的样式

2、同时增加多个样式,传递多个样式名称参数,以“ ,”分隔

3、toggle方法:如果有样式就是移除,没有就是添加,而且只能切换一个

**其他方法的具体使用**

此外,如果想利用classList返回的集合对象,只需要一个contains方法即可。contains:判断元素是否拥有某个名称的样式,如果有返回true,如果没有返回false

相信看了上述介绍,会对两个属性的区别有了比较详细的了解。

  • 15
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值