javascript - 这个元素是如何隐藏的？如何捕捉它

Question

我正在寻找如何隐藏这个 HTML 元素的方法。

例如，加载时的 HTML DOM 如下所示，

<div class=""> 
   <header>
       <!---->
       <!---->
       <!---->
   </header>
</div>

发起点击事件后，HTML DOM 变成了这个；

<div class="container"> 
   <header>
       <!---->
       <div class="show"></div>
       <!---->
   </header>
</div>

关于它如何做到这一点的任何建议？另外，有没有办法捕捉这个现场元素？我在 DOM 的其他地方有一个触发显示元素的点击事件，我也尝试了on函数，但它显示为未定义。请记住，这不是我自己的网站。

我希望这是有道理的，谢谢让我知道如果我需要编辑或建议任何更改

Answer 1

它与此类似，其中class="show"或是hide将元素设置为的css类display:none或block

此示例仅用于演示

div=document.querySelectorAll("div")
btn.addEventListener("click",()=>{
   i=Math.floor(Math.random()*div.length)
   console.log(div[i])
    div[i].setAttribute("class","show")
})

.hide{display:none};
.show{display:block};

<div class="container"> 
   <header id="h">
      <div class="hide">a</div>
       <div class="hide">v</div>
       <div class="hide">x</div>
   </header>
</div>

<button id="btn">show</button>