js获取dom元素上所有的类名，增加类名，去除类名，切换类名(原生 vs jquery)

2024-03-17 17:37| 来源: 网络整理| 查看: 265

我们都知道一个元素可以写多个类名，每个类名之间使用空格隔开

hello world 1.原生的方法

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

var p=document.getElementsByTagName('p')[0]; console.log(p.classList）

1.2判断是否包括某个类名 el.classList.contains

var p=document.getElementsByTagName('p')[0]; console.log(p.classList.contains('p1'),p.classList.contains('p3'));// true false

1.3 添加某个类名 el.classList.add

var p=document.getElementsByTagName('p')[0]; p.classList.add('p3')

1.4 切换类名有的去掉没有加上 el.classList.toggle

var p=document.getElementsByTagName('p')[0]; p.classList.toggle('p3')

1.5 移除类名 el.classList.remove 可移除多个

var p=document.getElementsByTagName('p')[0]; p.classList.remove('p3')

2.jquery的方法

2.1.获取元素的类名 : $(el).attr(‘class’)

$('p').attr(class'');

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

$('p').hasClass('p1')

2.3 添加某个类名 $(‘el’).addClass(className)

$('p').addClass('p3')

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

$('p').toggleClass('p3');

2.5 移除类名 $(el).removeClass(className);

$('p').removeClass('p1')

【本文地址】

公司简介

联系我们