Question

我正在尝试更改页面中每个h1的颜色，但是此代码不会更改为任何颜色：

function toggleDark() {
  document.body.style.background = "#1e1e1e";
  document.body.style.color = "#fff";
  document.getElementsByTagName("h1").style.color = "#fff";
}

<body>
  <a href="#" onclick="toggleDark()">DM</a>
  <section>
    <div class="container">
      <h1>WLJ</h1>
    </div>
    <div>
      <h1>BB</h1>
    </div>
  </section>
</body>

但是，当我单击[0]时，它可以工作，但仅适用于第一个h1 ...

document.getElementsByTagName("h1")[0].style.color = "#fff";

我不知道我的代码有什么问题，我想要的是单击

时将每个h1设置为白色

谢谢。

Answer 1

Document.getElementsByTagName()返回 HTMLCollection 。您必须遍历所有元素才能分别设置样式：

function toggleDark() {
  document.body.style.background = "#1e1e1e";
  document.body.style.color = "#fff";
  [...document.getElementsByTagName("h1")].forEach(function(h){
    h.style.color = "#fff";
  });
}

<body>
<a href="#" onclick="toggleDark()">DM</a>
<section>
   <div class="container">
      <h1>WLJ</h1>
   </div>
   <div>
      <h1>BB</h1>
   </div>
</section>
</body>

Answer 2

这是我的贡献。

如Mamun所述，document.getElementsByTagName()返回HTMLCollection。

您可以对其进行迭代，然后将颜色设置为单个元素：

function toggleDark() {
  document.body.style.background = "#1e1e1e";
  
  let headers = document.getElementsByTagName("h1");
  
  for (let i = 0; i < headers.length; i++) {
    headers[i].style.color = "#fff";
  }
}

<a href="#" onclick="toggleDark()">DM</a>
<section>
  <div class="container">
    <h1>WLJ</h1>
  </div>
  <div>
    <h1>BB</h1>
  </div>
</section>

getElementsByTagName不适用于每个标签

2 个答案: