javaScript 添加和移除class类名的几种方法

添加类属性:

// 一次只能设置一个类值,如果当前属性本身存在类值,会被替换
element.className = '类名';

/*
 * .setAttribute 用来设置自定义属性和值的
 * 自定义属性:原本标签中没有这个属性,为了存储数据,方便操作自己设置添加的。
 * 自定义属性无法直接通过DOM对象的方式获取或设置
 * 可以通过 .getAttribute 方法获取
 * 因为"class"是系统自有的属性,所以直接传入"class"后也可以生效
*/ 
element.setAttribute('属性名','值');


// .classList 是一个只读属性,会以字符串数组的形式返回这个元素的所有类名(类列表)
// 如果类属性没有设置或者为空,会返回 0
// 虽然是只读属性,但是可以配合使用 add(), remove() 和 toggle() 方法修改它
// add() 往类属性内添加类值,可以一次添加多个类值,如果当前类属性存在多个类值,该方法也可以添加,不会清除替换原有的类值
// remove() 移除类列表内的类值,可以一次移除多个
// toggle() 判断元素类列表内有没有某个类名,有则移除,没有则添加(切换效果),同样,如果类属性存在多个类值,添加时不会清除替换原有的类值
element.classList.add('类名');

移除类属性:

// 把元素的类属性值替换成空 "",清空的是类值,class属性还在
element.className = "";

// 移除指定的自定义或系统的属性和其值,整个移除,去污不残留
element.removeAttribute('类名');

// 移除类列表内指定的类值,可以一次移除多个,移除的是类值,class属性还在
element.classList.remove('类名1','类名2',...);
posted @ 2020-04-18 17:06  有火光  阅读(3147)  评论(0编辑  收藏  举报