如何使用 JavaScript 更改元素的类
答案：使用classList属性
在现代浏览器中，您可以使用 DOM 元素的 classList 属性通过 JavaScript 动态地将 CSS 类添加、删除或切换到 HTML 元素。
下面的示例将向您展示如何在单击按钮时更改 DIV 元素的类。 它适用于所有主流浏览器，例如 Chrome、Firefox、Microsoft Edge、Safari 等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change an Element's Class with JavaScript</title>
<style>
.highlight{
background: yellow;
}
.bordered{
border: 5px solid #000;
}
.padded{
padding: 20px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div id="content">
<h1>这是一个标题</h1>
<p>This is a paragraph of text.</p>
</div>
<p>
<button type="button" onclick="addSingleClass()">Add Highlight Class</button>
<button type="button" onclick="addMultipleClass()">Add Bordered and Padded Class</button>
</p>
<p>
<button type="button" onclick="removeSingleClass()">Remove Highlight Class</button>
<button type="button" onclick="removeMultipleClass()">Remove Bordered and Padded Class</button>
</p>
<p>
<button type="button" onclick="toggleClass()">Toggle Hide Class</button>
</p>
<script>
// 选择元素
var elem = document.getElementById("content");
function addSingleClass(){
elem.classList.add("highlight"); // Add a highlight class
}
function addMultipleClass(){
elem.classList.add("bordered", "padded"); // Add bordered and padded class
}
function removeSingleClass(){
elem.classList.remove("highlight"); // Remove highlight class
}
function removeMultipleClass(){
elem.classList.remove("bordered", "padded"); // Remove bordered and padded class
}
function toggleClass(){
elem.classList.toggle("hide"); // Toggle hide class
}
</script>
</body>
</html>或者，要支持旧版浏览器，您可以使用 className 属性。 以下示例演示如何使用此属性添加或替换 CSS 类。
<div id="info">Some important information!</div>
<script>
// 选择元素
var elem = document.getElementById("info");
elem.className = "note"; // 用 note 类添加或替换所有类
elem.className += " highlight"; // Add a new class highlight
elem.className += " bordered padded"; // 添加两个带边框和填充的新类
elem.className = ""; // 删除所有类
</script>请查看 JavaScript DOM 样式 上的教程，了解有关元素样式的更多信息。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements