js获取类名

js获取类名

在web开发中，经常需要操作DOM元素的类名，比如添加、删除或切换类名。JavaScript提供了几种方法来获取元素的类名，本文将详细介绍这些方法。

通过classList属性获取类名

在JavaScript中，我们可以通过元素的classList属性来获取元素的类名。classList是一个DOMTokenList对象，具有一些方法来操作元素的类名。

获取元素的类名列表

可以通过classList属性的value属性或者调用classList的方法来获取元素的类名列表。

// 获取元素
let element = document.getElementById('example');

// 通过value属性获取类名列表
let classNames = element.classList.value;
console.log(classNames);

// 通过方法获取类名列表
let classes = element.classList;
classes.forEach((className) => {
    console.log(className);
});

运行结果:

class1 class2 class3

检查元素是否含有某个类名

可以通过classList属性的contains方法来检查元素是否含有某个类名。

// 获取元素
let element = document.getElementById('example');

// 检查是否含有特定类名
if (element.classList.contains('class1')) {
    console.log('元素含有class1类名');
} else {
    console.log('元素不含有class1类名');
}

运行结果:

元素含有class1类名

添加类名

可以通过classList属性的add方法来添加类名。

// 获取元素
let element = document.getElementById('example');

// 添加类名
element.classList.add('newClass');
console.log(element.classList.value);

运行结果:

class1 class2 class3 newClass

删除类名

可以通过classList属性的remove方法来删除类名。

// 获取元素
let element = document.getElementById('example');

// 删除类名
element.classList.remove('class2');
console.log(element.classList.value);

运行结果:

class1 class3

切换类名

可以通过classList属性的toggle方法来切换类名，如果元素含有特定类名则删除，如果不含有则添加。

// 获取元素
let element = document.getElementById('example');

// 切换类名
element.classList.toggle('class1');
console.log(element.classList.value);

运行结果:

class2 class3

通过className属性获取类名

除了使用classList属性，还可以通过元素的className属性来获取类名。

// 获取元素
let element = document.getElementById('example');

// 获取类名
let classNames = element.className;
console.log(classNames);

运行结果:

class1 class2 class3

但是需要注意的是，className属性返回的是一个字符串，如果需要对类名进行操作，建议使用classList属性。

总结

本文介绍了通过classList属性和className属性来获取元素的类名的方法。在实际开发中，建议使用classList属性来操作类名，因为它提供了更多的方法来方便地操作类名。