无法读取空属性样式

问题描述:

我在点击链接时试图隐藏移动导航栏时遇到此错误。这似乎是一个非常简单的问题,我也浏览了一些类似的问题,但我似乎无法弄清楚。无法读取空属性样式

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

但控制台是给我的“无法读取空的财产风格”的错误。我不知道nav为空。

+0

尽管我现在才意识到反正无法使用,因为chid元素将会隐藏起来...... – 123 2015-02-09 01:05:41

你的代码应该是

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

你有一个传递给程序。你的代码不会导致错误,因为变量是在你的函数中声明的,但它没有任何价值。

是的,尖尖的答案是正确的。 它为我工作。

<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>