无法读取属性 Null 样式

Question

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

我的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 中的 link 被点击时，我运行这个 JavaScript 函数：

function HideNav () {

    var nav = document.getElementById(nav);

    nav.style.display='none';
}

但是控制台给我 "Cannot read property style of null" 错误。我不确定 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 样式

Cannot Read Property Style Of Null

javascript

html

css

mobile

nav

无法读取 属性 Null 样式

Cannot Read Property Style Of Null

javascript

html

css

mobile

nav

无法读取属性 Null 样式