在HTML和CSS中，我们经常需要找到特定的类(class)来修改元素的样式，这通常可以通过JavaScript或者jQuery等工具来实现，本文将详细介绍如何通过JavaScript和jQuery来找到HTML中的类。
JavaScript方法
1、通过Element.getAttribute()方法获取类名
2、使用Element.classList属性操作类名
解析：
我们可以使用Element.getAttribute()方法获取元素的"class"属性，这个属性包含了元素的所有类名，类名之间用空格分隔，我们可以使用字符串的split()方法将类名字符串分割成数组，然后遍历这个数组，对每个类名进行操作。
代码示例：
var element = document.getElementById('myElement'); // 获取元素 var className = element.getAttribute('class'); // 获取类名 var classes = className.split(' '); // 将类名分割成数组 for (var i = 0; i < classes.length; i++) { console.log(classes[i]); // 打印每个类名 }
2、使用Element.classList属性操作类名
解析：
除了使用Element.getAttribute()方法获取类名外，我们还可以使用Element.classList属性直接操作类名，Element.classList属性是一个只读属性，它返回一个DOMTokenList对象，该对象包含了元素的所有类名，我们可以使用DOMTokenList对象的add()、remove()、toggle()等方法来添加、删除或切换类名。
代码示例：
var element = document.getElementById('myElement'); // 获取元素
element.classList.add('newClass'); // 添加新的类名
element.classList.remove('oldClass'); // 删除旧的类名
element.classList.toggle('anotherClass'); // 切换另一个类名的状态
jQuery方法
1、通过$(selector).attr('class')方法获取类名
2、使用$(selector).addClass()、$(selector).removeClass()、$(selector).toggleClass()方法操作类名
解析：
我们可以使用jQuery的选择器选择到目标元素，然后使用attr('class')方法获取元素的"class"属性，这个属性包含了元素的所有类名，类名之间用空格分隔，我们可以使用字符串的split()方法将类名字符串分割成数组，然后遍历这个数组，对每个类名进行操作。
代码示例：
var element = $('myElement'); // 获取元素
var className = element.attr('class'); // 获取类名
var classes = className.split(' '); // 将类名分割成数组
for (var i = 0; i < classes.length; i++) {
console.log(classes[i]); // 打印每个类名
}
除了使用attr()方法获取类名外，我们还可以使用addClass()、removeClass()、toggleClass()方法直接操作类名，这些方法可以接受一个或多个参数，参数是要添加、删除或切换的类名，如果要添加多个类名，可以将它们放在一个数组中作为参数传递给这些方法，如果要删除所有指定的类名，可以将这些类名放在一个数组中作为参数传递给removeClass()方法，如果要切换所有指定的类名的状态，可以将这些类名放在一个数组中作为参数传递给toggleClass()方法。
代码示例：
$('myElement').addClass('newClass'); // 添加新的类名
$('myElement').removeClass('oldClass'); // 删除旧的类名
$('myElement').toggleClass('anotherClass'); // 切换另一个类名的状态
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/225431.html
微信扫一扫 