JavaScript 类名

摘要: 在本教程中，您将学习如何使用 JavaScript className 属性来操作元素的 CSS 类。

JavaScript className 简介

className 是元素的属性，它返回元素的 CSS 类列表（以空格分隔）作为字符串。

element.classNameCode language: CSS (css)

假设您有以下 ul 元素

<ul id="menu" class="vertical main">
   <li>Homepage</li>
   <li>Services</li>
   <li>About</li>
   <li>Contact</li>
</ul>Code language: HTML, XML (xml)

以下是在控制台窗口中显示 ul 元素的类：

let menu = document.querySelector('#menu');
console.log(menu.className);Code language: JavaScript (javascript)

输出

vertical main

要使用 className 属性将新类添加到元素，您可以 连接 现有类名和新类名。

element.className += newClassName; 

+= 运算符将 newClassName 连接 到元素的现有类列表中。因此，您需要在新的类名前添加一个空格，如下所示：

let menu = document.querySelector('#menu');
menu.className += ' new';
console.log(menu.className);Code language: JavaScript (javascript)

输出

'vertical main new'Code language: JavaScript (javascript)

在实践中，您将使用 classList 将新类添加到元素的现有类中。

let menu = document.querySelector('#menu');
menu.classList.add('new');
console.log(menu.className);Code language: JavaScript (javascript)

输出

'vertical main new'Code language: JavaScript (javascript)

要完全覆盖元素的所有类，可以使用简单的赋值运算符。例如：

element.className = "class1 class2";Code language: JavaScript (javascript)

要获取元素的完整类列表，您需要访问 className 属性。

let classes = element.className;Code language: JavaScript (javascript)

因为 class 是 JavaScript 中的关键字，所以使用 className 而不是 class。

同时 class 是 HTML 属性

<div id="note" class="info yellow-bg red-text">JS className</div>Code language: HTML, XML (xml)

而 className 是元素的 DOM 属性。

let note = document.querySelector('#note');
console.log(note.className); Code language: JavaScript (javascript)

输出

info yellow-bg red-text

元素还有一个属性可以帮助您更好地操作其 CSS 类，称为 classList。

总结

• className 属性返回元素的以空格分隔的类列表，作为字符串。

测验