javascript - 无法使用 JavaScript 更改 div 的类

Question

所以我开始研究 JavaScript 并尝试设置以下场景:

我的站点上有 2 个按钮(ID 是 buttonWebdev 和 buttonUXUI)，悬停在它们上面时应该会触发一个操作。如果 buttonWebdev 悬停在上面，它应该隐藏所有 p'、h3 和 imgs 类“classWeb”。我写了这段代码来做到这一点，但它不起作用:

HTML:

<h3 class="classWeb">Editierbare Inhalte</h3>
  <p class="classWeb">Test</p>
<button class="buttonImg" id="buttonWebdev"><img src="./img/buttonWebdev.png" /></button>
<script type="text/javascript">
var button = document.getElementById('buttonWebdev');
var classWeb = document.getElementsByClassName('classWeb');
button.onmouseover = function() {
  classWeb.className = 'webdev';

}

CSS:

.classWeb.webdev {
  display: none;
}

Answer 1

首先，由于页面上可以有多个具有给定类的元素，getElementsByClassName 返回元素的列表，而不是单个元素。您需要使用 for...of 循环对该列表的每个元素执行操作，例如:

for (let element of classWeb) {
    element.className = 'webdev';
}

(不过，for...of 相对较新，因此您可能必须使用常规的 for 循环，具体取决于您的目标浏览器。)

解决这个问题后，你会遇到另一个问题。当您像那样分配给 className 时，您是在一个对象上设置整个类列表。如果类列表是 'webdev'，它不再包括 'classWeb'。现代浏览器支持在不影响其余部分的情况下添加一个类的 API:

for (let element of classWeb) {
    element.classList.add('webdev');
}

诊断此类问题的方法是打开浏览器的开发人员工具，在控制台中查找 JavaScript 错误，然后查看您试图影响的元素在文档树中的状态。