js获取dom元素上所有的类名,添加类名,移除类名,切换类名(原生 js、 jquery)

typescript 复制代码
<div class='m-slidebar'>内容</div>

1.原生方法:

1-1: 获取元素的类名 : el.classList 可以添加多个类名 中间空格隔开

typescript 复制代码
var sideBar = document.getElementsByClassName('m-slidebar')[0];;
console.log(sideBar.classList)

1-2: 判断是否包括某个类名 el.classList.contains

typescript 复制代码
var sideBar = document.getElementsByClassName('m-slidebar')[0];
console.log(sideBar.classList.contains('p1'),sideBar.classList.contains('p3'))  //true、false

1-3: 添加某个类名 el.classList.add

typescript 复制代码
var sideBar=document.getElementsByClassName('m-slidebar')[0];
sideBar.classList.add('p3')

1-4: 切换类名 有的去掉 没有加上 el.classList.toggle

typescript 复制代码
var sideBar=document.getElementsByTagName('m-slidebar')[0];
sideBar.classList.toggle('p3')

1-5 移除类名 el.classList.remove 可移除多个

typescript 复制代码
var sideBar=document.getElementsByTagName('m-slidebar')[0];
sideBar.classList.remove('p3')

2.JQuery方法

2-1:取元素的类名 : $(el).attr('class')

typescript 复制代码
$('m-slidebar').attr('class');

2-2:判断是否包括某个类名 $(el).hasClass(className)

typescript 复制代码
 $('m-slidebar').hasClass('p1')

2-3 :添加某个类名 $('el').addClass(className)

typescript 复制代码
$('m-slidebar').addClass('p3')

2-4:切换类名 有的去掉 没有加上 $(el).toggleClass('p1')

typescript 复制代码
$('m-slidebar').toggleClass('p3');

2-5:移除类名 $(el).removeClass(className);

typescript 复制代码
$('m-slidebar').removeClass('p1')
相关推荐
开发者工具分享14 分钟前
如何应对敏捷转型中的团队阻力
开发语言
疯狂的沙粒17 分钟前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
gregmankiw21 分钟前
C#调用Rust动态链接库DLL的案例
开发语言·rust·c#
roman_日积跬步-终至千里36 分钟前
【Go语言基础【20】】Go的包与工程
开发语言·后端·golang
xiaominlaopodaren37 分钟前
Three.js 光影魔法:如何单独点亮你的3D模型
javascript
PasserbyX38 分钟前
一句话解释JS链式调用
前端·javascript
1024小神40 分钟前
tauri项目,如何在rust端读取电脑环境变量
前端·javascript
古夕1 小时前
如何将异步操作封装为Promise
前端·javascript
@一枝梅1 小时前
vue3 vite.config.js 引入bem.scss文件报错
javascript·rust·vue·scss
秦少游在淮海1 小时前
C++ - string 的使用 #auto #范围for #访问及遍历操作 #容量操作 #修改操作 #其他操作 #非成员函数
开发语言·c++·stl·string·范围for·auto·string 的使用