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 个答案: