如何在不使用jQuery的情况下通过类名用JavaScript修改HTML样式？

你这段代码里，getElementById("p2")能正常改样式是因为ID是唯一的，它直接返回单个DOM元素，所以.style能直接生效。但getElementsByClassName("theClass")返回的是一个HTMLCollection——也就是一堆元素的集合（类数组对象），集合本身没有style属性，直接用它改当然没反应啦！

给你几个解决办法，按需选就行：

1. 只有一个匹配元素？直接取第一个 #

如果页面里只有这一个带theClass类的元素，直接用索引[0]拿到单个元素就行：

document.getElementsByClassName("theClass")[0].style.color = "blue";

2. 多个元素需要修改？遍历集合 #

要是有多个元素都带这个类，就得循环遍历每个元素来改：

const classElements = document.getElementsByClassName("theClass");
for (let i = 0; i < classElements.length; i++) {
  classElements[i].style.color = "blue";
}

3. 更现代的写法：用querySelector/querySelectorAll #

现在很多人更倾向用这两个方法，语法更灵活，返回的结果也方便操作：

• 单个元素（取第一个匹配的）：

document.querySelector(".theClass").style.color = "blue";

• 多个元素（遍历所有匹配的）：

document.querySelectorAll(".theClass").forEach(el => {
  el.style.color = "blue";
});

最后给你贴个修正后的完整代码，直接就能跑：

<!DOCTYPE html>
<html>
<body>
<p id="p1" class="theClass">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
// 这里改成取第一个元素
document.getElementsByClassName("theClass")[0].style.color = "blue";
document.getElementById("p2").style.fontSize = "larger";
</script>
<p>上述段落已被修改……</p>
</body>
</html>

内容的提问来源于stack exchange，提问作者user6363467