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

<div class='m-slidebar'>内容</div>

1.原生方法:

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

var sideBar = document.getElementsByClassName('m-slidebar')[0];;console.log(sideBar.classList）

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

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

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

var sideBar=document.getElementsByClassName('m-slidebar')[0];sideBar.classList.add('p3')

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

var sideBar=document.getElementsByTagName('m-slidebar')[0];sideBar.classList.toggle('p3')

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

var sideBar=document.getElementsByTagName('m-slidebar')[0];sideBar.classList.remove('p3')

2.JQuery方法

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

$('m-slidebar').attr('class');

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

$('m-slidebar').hasClass('p1')

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

$('m-slidebar').addClass('p3')

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

$('m-slidebar').toggleClass('p3');

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

$('m-slidebar').removeClass('p1')