如何通过使用 javascript 获取类名来更改 HTML 样式（不允许使用 jQuery）？答案

【问题标题】：How to change HTML style by taking the class name using javascript (no jQuery allowed)?如何通过使用 javascript 获取类名来更改 HTML 样式（不允许使用 jQuery）？
【发布时间】：2018-10-16 03:41:19
【问题描述】：

到目前为止，我已经尝试过了，如果我采用元素 id 是有效的，但如果我采用类名是无效的......

<!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").style.color = "blue";

document.getElementById("p2").style.fontSize = "larger";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

这是输出：

【问题讨论】：

标签： javascript html css class

【解决方案1】：

getElementsByClassName 返回一个 HTMLCollection，而不是一个元素。如果要将样式应用于集合中的元素，请先选择该元素：

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

&lt;p id="p1" class="theClass"&gt;Hello World!&lt;/p&gt;

但如果你要选择单个元素，最好使用querySelector：

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

&lt;p id="p1" class="theClass"&gt;Hello World!&lt;/p&gt;

即使您确实需要对具有共同类名的多个元素应用样式（或做某事），getElementsBy* 方法也会返回 HTMLCollections，这可能很难使用。考虑改用 querySelectorAll，它返回一个静态 NodeList - 与 HTMLCollection 不同，它可以直接迭代，在迭代时不会改变，而且更灵活。

document.querySelectorAll('.theClass')
  .forEach(p => p.style.color = "blue");

<p class="theClass">Hello World!</p>
<p class="theClass">Hello World!</p>
<p class="theClass">Hello World!</p>

【讨论】：

您应该指定 .querySelector() 只返回 DOM 中第一个匹配该选择器的元素。
起初我对你的 forEach 脚本的简单性很感兴趣，甚至赞成你的回答。但似乎 IE 不支持箭头功能。见caniuse.com/#feat=arrow-functions。这意味着我们将不得不使用函数表达式，这使得语法并不比for 循环更容易。我们已经知道for 循环。
@FrankConijn 任何半严肃的项目都应该通过构建过程来使用 Babel 自动转换语言语法。永远不要用过时的语法来欺骗自己——这只会让代码读起来和写起来更痛苦。
我使用 IE 的客户不同意。而且只要 Win7 仍在企业界广泛使用，他们就应该被视为关键用户。
@FrankConijn 我没有说不支持 IE - 我说构建过程会自动处理这些问题，任何严重的问题都应该已经到位。

【解决方案2】：

document.getElementsByClassName 给你节点列表。并且列表中没有 style 属性。您必须遍历列表才能应用样式。

如果只有 div 有你可以使用

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

PS。当某些东西不起作用时，您应该始终检查浏览器的控制台。您将看到类似can not ... .style of ...

的错误

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

document.getElementById("p2").style.fontSize = "larger";

var els = document.getElementsByClassName('theClass1');

for(var i=0; i< els.length; i++){
   els[i].style.color = "green"

}

<!DOCTYPE html>
<html>
<body>

<p id="p1" class="theClass">Hello World!</p>
<p id="p2">Hello World!</p>

<p id="p12" class="theClass1">Hello World 1!</p>
<p id="p14" class="theClass1">Hello World 2!</p>
<p id="p13" class="theClass1">Hello World 3!</p>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：