Question

为什么我会收到“无法读取 null 的属性样式”错误？

2016-11-14

601

javascript

我无法理解为什么当我将鼠标指针移动到所有 div 上时会出现

uncaught typeError: Cannot read property 'style' of null" at line 38

错误。每次我将指针移动到 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

您需要将只读变量 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 ，但它确实属于要避免的单词列表，因为它在浏览器实现中是只读的。

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