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')
相关推荐
@LetsTGBot搜索引擎机器人1 天前
Telegram 被封是什么原因?如何解决?(附 @letstgbot 搜索引擎重连技巧)
开发语言·python·搜索引擎·机器人·.net
沐欣工作室_lvyiyi1 天前
基于Matlab的简易振动信号分析系统(论文+仿真)
开发语言·matlab·毕业设计·振动信号分析
liu****1 天前
1.模拟算法
开发语言·c++·算法·1024程序员节
数据村的古老师1 天前
Python数据分析实战:基于25年黄金价格数据的特征提取与算法应用【数据集可下载】
开发语言·python·数据分析
孔明兴汉1 天前
第一章-第三节-Java开发环境配置
java·开发语言
小王不爱笑1321 天前
Java 核心知识点查漏补缺(一)
java·开发语言·python
空空kkk1 天前
Java——类和对象
java·开发语言
沐知全栈开发1 天前
Python3 集合
开发语言
Jonathan Star1 天前
用Python轻松提取视频音频并去除静音片段
开发语言·python·音视频
程序猿阿伟1 天前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js