首页 > 代码库 > js操作css类

js操作css类

经常会使用js动态设置css类,两种方法。

1、className

className是包含所有类的字符串,所以添加删除类就像操作字符串一样就好。

 

添加类的话比较简单,直接

obj.className += ‘ active‘;

记得加空格。

 

移除类,需要使用字符串replace函数。

obj.className.replace(‘ active‘, ‘‘);

如果直接这样写,你会发现没用!!!!

后来才发现,replace不改变原值,而返回值是替换后的值,所以需要这样:

obj.className = obj.className.replace(‘ active‘, ‘‘);

 

清空类就简单了,设置className = ‘‘

 

2、classList

HTML5带来了更简单的操作方法,classList。

增加一个类

obj.classList.add(‘active‘);

移除一个类

obj.classList.remove(‘active‘);

 

js操作css类