如何在 JavaScript 中通过类名获取元素
答案:使用getElementsByClassName()方法
您可以使用 getElementsByClassName() 在 JavaScript 中通过它们的类属性值来获取或选择元素。 此方法返回匹配元素的数组，因为页面上的多个元素可以具有相同的类。 让我们看一个例子:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>在 JavaScript 中按类选择元素</title>
<style>
.box{
height: 50px;
background: #ddd;
margin: 20px;
}
.box.bordered{
border: 5px solid #333;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box bordered"></div>
<div class="box"></div>
<div class="box bordered"></div>
<div class="box"></div>
<script>
var boxes = document.getElementsByClassName("box");
/* 选择第一个框并将其设置为红色背景 */
boxes[0].style.background = "red";
/* 选择同时具有"box"和"bordered"类的元素
并将它们设置为黄色背景 */
var borderedBoxes = document.getElementsByClassName("box bordered");
for(var i = 0; i < borderedBoxes.length; i++){
borderedBoxes[i].style.background = "yellow";
}
/* 选择最后一个元素并将其设置为绿色背景 */
boxes[boxes.length - 1].style.background = "green";
</script>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
