无法读取 Null 的属性样式答案

【问题标题】：Cannot Read Property Style Of Null无法读取 Null 的属性样式
【发布时间】：2015-02-09 01:03:30
【问题描述】：

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

我的 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';
}

但控制台给了我“无法读取 null 的属性样式”错误。我不确定nav 是如何为空的。

【问题讨论】：

虽然我现在才意识到这无论如何都行不通，因为 chid 元素无论如何都会被隐藏......

标签： javascript html css mobile nav

【解决方案1】：

你的代码应该是

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

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

【讨论】：

【解决方案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>

【讨论】：