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',...);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值