Question

未捕获的类型错误：无法设置未定义的属性“visibility”

2019-04-11

17230

javascript html

我想在按下按钮后让某些东西不可见。问题是我想同时定位多个东西。

所以我不能使用： 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：无法设置未定义的属性“visibility”（这里是我的函数名称）

Answer 1

由于按类名获取元素会生成一个列表，因此您需要通过遍历列表将样式单独添加到每个元素。我还建议将 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 2

您需要循环 document.getElementsByClassName("targ") 的结果。

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

Answer 3

如何切换 ＆lt; li＆gt; 元素容器而不是直接定位它们的可见性：

243729476

John Doe

2019-04-11