开发者问题收集

DOM 元素引用为空 - 未捕获 TypeError：无法读取为空的属性“style”

2014-01-19
8704
javascript html css styles

我正在开发一个灵活的菜单，单击“链接”时无需在各个页面之间跳转。 我为此使用的 JavaScript 如下： 

var inbox = document.getElementById("u-content-inbox");
var friends = document.getElementById("u-content-friends");
var agenda = document.getElementById("u-content-agenda");
var list = document.getElementById("u-content-list");
var news = document.getElementById("u-content-news");
var notes = document.getElementById("u-content-notes");

function Inbox() {
  inbox.style.visibility='visible';
}

function Friends() {
  friends.style.visibility='visible';
}

function Agenda() {
  agenda.style.visibility='visible';
}

function List() {
  list.style.visibility='visible';
}

function News() {
  news.style.visibility='visible';
}

function Notes() {
  notes.style.visibility='visible';
}

div 元素如下： 

<div id="u-content-inbox" style="visibility:hidden;">
  Inbox
</div>

<div id="u-content-friends" style="visibility:hidden;">
  Friends
</div>

每个 div 都有一个“u-content-x”。 但是，当我尝试将样式属性“visibility”更改为visible时。它给出了以下错误： Uncaught TypeError：无法读取 null 的属性“style”

我没有看到我做错了什么。有人可以帮我解释一下为什么 JavaScript，或者说我无法让它工作吗？ 每当我运行检查时 

if(!inbox) {
alert("Inbox div has not been found);
}

都不会显示警报消息。

1个回答

确保在文档加载后调用 javascript！我几乎可以肯定，您正在尝试在元素引用存在于 dom 中之前获取它们。最佳做法是将所有脚本放在 body 标签结束之前。 

  <script src="some/path/to/file.js"></script>
</body>

如果您的脚本在元素之前出现在文档中，您可以将代码放在此加载事件函数中： 

window.addEventListener('load', function() {
 //your code here
});

作为代码架构的注释，您可以将一个类附加到每个元素，然后执行以下操作： 

var toMakeVisible = document.getElementsByClassName('some-class');
for (var i=0; i<toMakeVisible; ++i) {
  var elem = toMakeVisible[i];
  elem.style.visibility = 'visible';
}
m59
2014-01-19