如何在Javascript中隐藏对象？

问题描述

我想在Javascipt中隐藏具有相同类的图像。我有3张图片要隐藏，但我不知道该怎么办。我试过了，但是没用：

html

<img src="img1.png" class="tool">
<img src="img2.png" class="tool">
<img src="img3.png" class="tool">

js

const toolHide = document.getElementsByClassName("tool");
for (i=0; i < toolHide.length; i++) {
    if (toolHide.style.visibility  === "visible") {
        toolHide.style.visibility = "hidden";
    }
}

请帮助！

解决方法

跳过条件，仅设置其可见性（如果您实际要使用它），然后使用"hidden"（两个“ d”）。您还忘记了使用索引来访问列表中的每个项目。

 //   v--- use declarations!
for (let i=0; i < toolHide.length; i++) {
        toolHide[i].style.visibility = "hidden";
}

.style属性仅提供直接在元素上设置的样式。

---

如果您想实际上隐藏整个元素，而不仅仅是使其不可见，请使用display属性。

        toolHide[i].style.display = "none";

---

最后，我宁愿添加一个具有所需显示/可见性属性的类。

         toolHide[i].classList.add("hidden");

然后确保在CSS中定义一个.hidden类。

---

最终，我宁愿这样做：

document.querySelectorAll(".tool")
  .forEach(el => el.classList.add("hidden"));