HTML | DOM className 属性

简介

在 HTML 文档中，className 属性用于获取或设置指定元素的类名。它提供了一种方便的方式来操作元素的样式和行为。

语法

element.className

用法

获取类名

要获取指定元素的类名，可以使用 className 属性。它会返回一个包含所有类名的字符串，类名之间用空格分隔。

const element = document.getElementById("myElement");
const classNames = element.className;
console.log(classNames);

设置类名

要设置指定元素的类名，可以使用 className 属性赋值。

const element = document.getElementById("myElement");
element.className = "newClass";

注意，使用这种方式修改类名时，会覆盖原有的所有类名。如果你只想添加一个新类名而不是替换现有的类名，可以使用 classList.add() 方法。

const element = document.getElementById("myElement");
element.classList.add("newClass");

操作类名

还有一些其他有用的方法可以由 className 属性衍生出来：

• 使用 classList 属性访问元素的类名列表。
• 使用 classList.contains() 方法检测元素是否包含特定类名。
• 使用 classList.remove() 方法删除特定类名。
• 使用 classList.toggle() 方法在类名存在时删除它，不存在时添加它。

以下是一些示例：

const element = document.getElementById("myElement");

// 获取类名列表
const classList = element.classList;
console.log(classList);

// 检测是否包含某个类名
const hasClass = element.classList.contains("myClass");
console.log(hasClass);

// 删除类名
element.classList.remove("myClass");

// 切换类名的状态
element.classList.toggle("active");

总结

HTML | DOM className 属性提供了一种方便的方式来操作元素的类名。通过获取和设置 className 属性，可以操作元素的样式和行为。此外，借助 classList 属性和相关方法，还可以更灵活地操作类名。

更多关于 className 属性的详细信息，请参阅 MDN 文档。