如何在 JavaScript 中为给定元素添加类
答案:使用 className 属性
如果您想在不替换现有类的情况下将类添加到 HTML 元素，您可以执行以下示例所示的操作:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用 JavaScript 向元素添加类</title>
<style>
.content{
padding: 20px;
border: 2px solid #ccc;
}
.highlight{
background: yellow;
}
</style>
</head>
<body>
<div class="content" id="myDiv">
<p>这是一段文本</p>
<button type="button" onclick="addNewClass();">Add Class</button>
</div>
<script>
function addNewClass(){
/* 通过 id 属性选择 div 元素 */
var elem = document.getElementById("myDiv");
elem.className += " highlight";
}
</script>
</body>
</html>在上面的示例中，addNewClass() 函数将一个新类 highlight 添加到已经具有类 box 的 DIV 元素中，而不使用 className 属性删除或替换它。
或者，您也可以使用 classList 属性向元素添加/删除类，如下所示:
示例
<div class="alert info" id="myDiv">Important piece of information!</div>
<script>
/* 选择元素 */
var elem = document.getElementById("myDiv");
elem.classList.add("highlight"); /* 添加一个亮点类 */
elem.classList.remove("alert"); /* 删除警报类 */
</script>所有现代浏览器都支持 classList 属性。 IE 10 之前的版本不支持。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
