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')
相关推荐
CC码码3 分钟前
解决前端多标签页通信:BroadcastChannel
前端·javascript·web
墨鸦_Cormorant8 分钟前
Vue 概述以及基本使用
前端·javascript·vue.js
懂得节能嘛.15 分钟前
【动态配置中心】Java+Redis构建动态配置中心
java·开发语言·redis
专注于大数据技术栈16 分钟前
Java中JDK、JRE、JVM概念
java·开发语言·jvm
鹏多多27 分钟前
使用imaskjs实现js表单输入卡号/日期/货币等掩码的教程
前端·javascript·vue.js
波诺波35 分钟前
通用装饰器示例
开发语言·python
沐知全栈开发35 分钟前
Maven POM 简介
开发语言
艾莉丝努力练剑1 小时前
【C++模版进阶】如何理解非类型模版参数、特化与分离编译?
linux·开发语言·数据结构·c++·stl
kaikaile19951 小时前
MATLAB实现自适应卡尔曼滤波(AKF)
开发语言·matlab
立志成为大牛的小牛1 小时前
数据结构——二十五、邻接矩阵(王道408)
开发语言·数据结构·c++·学习·程序人生