洞察趋势 多维度提升品牌价值

新闻动态

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

所属栏目:发布日期:2022-11-16 08:36浏览量:3344作者:admin

我们有时候做网站或者做某些特效时要用到添加class类名,和移除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',...);
以上就是javascript中添加和移除类名的几种常用方法,希望对您有用,更多资讯和教程请关注长沙网站建设
-长沙网站建设,长沙网站开发,长沙网站设计,长沙网站制作,长沙软件开发,长沙系统开发,长沙做网站公司,长沙蒲公英网络

准备好做出改变了吗?

让我们共同助力您的企业数字化革新

您希望我们为您提供什么服务呢

· · · · · · · · ·

0731-84069615

/

扫一扫
技术大牛与您直接沟通