Question

我正在开发一个灵活的菜单，点击“链接”时不需要在页面之间跳转。我使用的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: Cannot read property 'style' of null

我没看到我做错了什么。有人可以给我一个清关，为什么只是JavaScript，或者更确切地说，我没有使它工作？每当我检查

时

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

不会显示警告消息。

Answer 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';
}

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

1 个答案: