Question

我在点击链接时尝试隐藏移动导航时遇到此错误。这似乎是一个非常简单的问题，我已经查看了一些类似的问题，但我似乎无法弄明白。

我的HTML

<div id=mobilenav class=mobilenav onclick="HideNav();">
    <nav id=nav>
    </nav>
</div>

mobilenav默认隐藏，当屏幕缩小时，我会显示它。

CSS

.mobilenav {
    display:none
}

@media screen and (max-width: 900px) {
    .mobilenav {
        display: block;   
    }
}

点击mobilenav中的链接时，我运行此JavaScript函数：

function HideNav () {

    var nav = document.getElementById(nav);

    nav.style.display='none';
}

但是控制台正在给我＆＃34;无法读取null的属性样式＆＃34;错误。我不确定nav是如何为空。

Answer 1

您的代码应为

var nav = document.getElementById("nav");

您必须将字符串传递给例程。你的代码不会导致错误，因为变量是在你的函数中声明的，但它没有任何价值。

Answer 2

是的，Pointy的回答是正确的。它对我有用。

<div id="mobilenav" class="mobilenav" onclick="HideNav();">
 <nav id="nav"> 
   Iam inside the nav id.
 </nav>
   Iam outside the nav id.
</div>

<style type="text/css">
.mobilenav {
display:none; /* Hides the Content */
}

@media screen and (max-width: 900px) {
.mobilenav {
    display: block;   /* Displays the content */
  }
}
</style>
<script type="text/javascript">
   function HideNav () {
     var nav = document.getElementById("nav");
       nav.style.display='none';
    }
</script>

无法读取Null的属性样式

2 个答案: