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')
相关推荐
Asort16 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
EMT37 分钟前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
艾小码38 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
前端康师傅43 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
Mintopia1 小时前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙1 小时前
JS设计模式指南
前端·javascript
Mintopia1 小时前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
断竿散人1 小时前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
uhakadotcom1 小时前
在python中,使用conda,使用poetry,使用uv,使用pip,四种从效果和好处的角度看,有哪些区别?
前端·javascript·面试
鹏多多1 小时前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js