為什么會出現“無法讀取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;
}