如何使用 JavaScript 更改元素的类
答案:使用classList属性
在现代浏览器中，您可以使用 DOM 元素的 classList 属性通过 JavaScript 动态地将 CSS 类添加、删除或切换到 HTML 元素。
下面的示例将向您展示如何在单击按钮时更改 DIV 元素的类。 它适用于所有主流浏览器，例如 Chrome、Firefox、Microsoft Edge、Safari 等。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用 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>这是一段文本</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 相关问题解答
以下是与此主题相关的更多常见问题解答:
