Question

我无法理解为什么要给予

未捕获的typeError：无法读取属性＆＃39; style＆＃39; of null＆＃34;在第38行

当我在所有div上移动鼠标指针时。每当我将指针移动到div时，我都会收到错误。

请解释问题所在。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

为什么我得到＆＃34;无法读取null的属性样式＆＃34;错误？

3 个答案: