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

Question

我到目前为止已经尝试过了，如果我认为元素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>

这是输出：

Answer 1

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

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

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

但是，如果您要选择一个元素，那么使用querySelector会更好：

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

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

即使确实需要将样式（或做某事）应用于具有共同类名的多个元素，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>

Answer 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>

Answer 3

尝试这个：

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

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

问题描述

3 个解决方案

解决方案1
3 2018-05-06 01:27:32

解决方案2
1 已采纳 2018-05-06 01:28:17

解决方案3
1 2018-05-06 01:29:50

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

问题描述

3 个解决方案

解决方案1 3 2018-05-06 01:27:32

解决方案2 1 已采纳 2018-05-06 01:28:17

解决方案3 1 2018-05-06 01:29:50

解决方案1
3 2018-05-06 01:27:32

解决方案2
1 已采纳 2018-05-06 01:28:17

解决方案3
1 2018-05-06 01:29:50