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')
相关推荐
y东施效颦13 分钟前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
爱学习的capoo17 分钟前
matlab自控仿真【第一弹】❀传递函数和输出时域表达式
开发语言·matlab
秋田君28 分钟前
深入理解JavaScript设计模式之单例模式
javascript·单例模式·设计模式
EverBule28 分钟前
Python 训练 day46
开发语言·python
摸鱼仙人~1 小时前
React中子传父组件通信操作指南
前端·javascript·react.js
程序员阿超的博客1 小时前
React事件处理:如何给按钮绑定onClick点击事件?
前端·javascript·react.js
前端小咸鱼一条1 小时前
Vue中渲染函数的使用
javascript·vue.js·ecmascript
郑州小张2 小时前
前端解析PDF文件目录以及点击目录实现对应内容预览
前端·javascript
蓝婷儿2 小时前
6个月Python学习计划 Day 18 - 项目实战 · 学生成绩管理系统(OOP版)
开发语言·python·学习
HINOTOR_2 小时前
DAY 25 异常处理
开发语言·python