为什么会出现“无法读取null的属性样式”错误？

Question

我不明白为什么会给

尚未捕获的typeError：无法读取第38行的属性“样式为null”

当我在所有div上移动鼠标指针时。 每次将指针移至div时，都会出现错误。

请说明问题所在。

 var top = "p3"; function toTop(newTop) { var domTop = document.getElementById(top).style; var domNew = document.getElementById(newTop).style; domTop.zIndex = "0"; domNew.zIndex = "10"; top = document.getElementById(newTop).id; } 

 .para1 { position: absolute; top: 10; left: 120; z-index: 0; border: solid; padding: 80; width: 300; background-color: aqua; } .para2 { position: absolute; top: 50; left: 150; z-index: 0; border: solid; padding: 80; width: 300; background-color: yellow; } .para3 { position: absolute; top: 100; left: 180; z-index: 0; border: solid; padding: 80; width: 300; background-color: red; } 

 <div style="z-index: 10;" class="para1" id="p1" onmouseover="toTop('p1')">Frame One</div> <div style="z-index: 5;" class="para2" id="p2" onmouseover="toTop('p2')">Frame Two</div> <div style="z-index: 0;" class="para3" id="p3" onmouseover="toTop('p3')">Frame Three</div> 

Answer 1

top是JavaScript中的保留标识符，因此您不能将其用作变量名。 这意味着在此功能中：

function toTop(newTop) {
    // here `top` points to `window`
    var domTop=document.getElementById(top).style;
    var domNew=document.getElementById(newTop).style;
    domTop.zIndex="0";
    domNew.zIndex="10";
    top=document.getElementById(newTop).id;
} 

top指向window对象，这就是为什么document.getElementById(top)返回null 。

Answer 2

您需要将只读的 var top重命名为例如myTop由于window.top是主窗口的句柄，因此会产生错误

var myTop = "p3";

function toTop(newTop) {
  var domTop = document.getElementById(myTop).style;
  var domNew = document.getElementById(newTop).style;
  domTop.zIndex = "0";
  domNew.zIndex = "10";
  myTop = document.getElementById(newTop).id;
}

我找不到官方文档中保留的 top ，但是它确实属于要避免的单词列表，因为top在浏览器实现中是只读的。

Answer 3

“ top”是保留的关键字，用于定义框架的顶部，将变量名“ top”替换为下面的其他名称。

var top1 = "p3";

function toTop(newTop) {
  var domTop = document.getElementById(top1).style;
  var domNew = document.getElementById(newTop).style;
  domTop.zIndex = "0";
  domNew.zIndex = "10";
  top1 = document.getElementById(newTop).id;
}