javascript - 无法使用 JavaScript 控制与另一个元素共享 css 类的 css 元素

Question

[仅供参考：进行 Udemy 教程挑战]

这是html。它显示 2 个骰子。如您所见，他们共享班级“骰子”。然后每个骰子也有自己的类来控制单个项目，分别是“dice1”和“dice2”。

<img src="dice-5.png" alt="Dice 1" class="dice dice1">
<img src="dice-5.png" alt="Dice 2" class="dice dice2">

这是所有这三个类的css，'dice'，'dice1'，'dice2'。如您所见，“dice1”和“dice2”类仅控制屏幕上的垂直位置。

.dice {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100px;
    box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);
}

.dice1 {
    top: 260px;
}

.dice2 {
    top: 150px;
}

在这个骰子游戏开始时，两个骰子都不可见。为此，我使用 Javascript 通过以下代码控制显示。

document.querySelector('.dice').style.display = 'none';

出于某种原因，这只适用于 dice1。它不适用于 dice2。如果我添加额外的代码行指定类“dice2”，dice2 也会消失。但是，选择“骰子”类应该同时选择它们。为什么这不起作用？

标签： javascriptcssclassdisplay

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Document 方法 querySelector()返回文档中的第一个元素

使用 querySelectorAll：

document.querySelectorAll('.dice').forEach( dice_Item=>dice_Item.style.display = 'none' );