未捕獲的類型錯誤：無法設置未定義的屬性“可見性”

Question

按下按鈕后，我試圖讓一些東西不可見。 問題是我想同時針對多個事物。

所以我不能使用： document.getElementById("targ").style.visibility = "hidden";

因為它只針對 4 個元素中的 1 個。

我嘗試使用：`document.getElementsByClassName("targ").style.visibility = "hidden";

 <div id="navbar" class="sticky"> <li><a href="#top" style="padding:0px" id="targimg"><img src="act_logo.png"></a></li> <li><a href="#description" class="targ">Description</a></li> <li><a href="#video" class="targ">Video</a></li> <li style="float:right" class="targ"><a href="#top">Top</a></li> <li><a href="#explication" class="targ">Explication</a></li> <li><a><span style="font-size:20px;cursor:pointer" onclick="openNav()">&#9776; open</span></a></li> </div> <script> function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementsByClassName("targ").style.visibility = "hidden"; document.getElementById("targimg").style.textAlign = "center"; } </script>

`

但這並不能改變可見性。 我收到錯誤消息：Uncaught TypeError: Cannot set property 'visibility' of undefined at（這里是我的函數名）

Answer 1

您需要循環 document.getElementsByClassName("targ") 的結果。

document.getElementsByClassName("targ").forEach(e => e.style.visibility = "hidden");

Answer 2

由於按類名獲取元素會生成一個列表，因此您需要通過遍歷列表將樣式單獨添加到每個元素。 我還建議將 targ 類分配給 li 標簽而不是錨點，因為隱藏錨點仍然會留下帶有項目符號的列表項：

 function openNav() { // document.getElementById("mySidenav").style.width = "250px"; targList = document.getElementsByClassName("targ"); document.getElementsByClassName("targ") if (targList) { for (var x = 0; x < targList.length; x++) { targList[x].style.visibility = "hidden"; } } document.getElementById("targimg").style.textAlign = "center"; }

 <div id="navbar" class="sticky"> <li> <a href="#top" style="padding:0px" id="targimg"><img src="act_logo.png"></a> </li> <li><a href="#description" class="targ">Description</a></li> <li><a href="#video" class="targ">Video</a></li> <li style="float:right" class="targ"><a href="#top">Top</a></li> <li><a href="#explication" class="targ">Explication</a></li> <li><a><span style="font-size:20px;cursor:pointer" onclick="openNav()">&#9776; open</span></a></li> </div>

Answer 3

如何切換<li>元素容器的可見性而不是直接定位它們：

 window.addEventListener('DOMContentLoaded', () => { document.querySelector('.menu-trigger').addEventListener('click', (event) => { event.stopPropagation(); event.preventDefault(); openNav(); }); }); function openNav() { // document.getElementById("mySidenav").style.width = "250px"; const menuEl = document.querySelector('.menu'); menuEl.classList.toggle('menu-off'); // document.getElementById("targimg").style.textAlign = "center"; }

 .menu-off { visibility: hidden; opacity: 0; }

 <div id="navbar" class="sticky"> <ul class="menu"> <li> <a href="#top" style="padding:0px" id="targimg"><img src="act_logo.png"></a> </li> <li><a href="#description" class="targ">Description</a></li> <li><a href="#video" class="targ">Video</a></li> <li style="float:right" class="targ"><a href="#top">Top</a></li> <li><a href="#explication" class="targ">Explication</a></li> </ul> <a class="menu-trigger"> <span style="font-size:20px;cursor:pointer">&#9776; open</span> </a> </div>