Question

我试图使用getElementById（）获取元素，但它返回null。

这是我在mozilla firefox调试器上遇到的错误

＆＃34; TypeError：document.getElementById（...）为null＆＃34;。

代码有什么问题？

＆＃13;

<html>
  <head>
    <title>Stack</title>
    <style type="text/css">
      .para1{position:absolute;top:10px;left:120px;z-index:0;border:solid;padding:80px;width:300px;background-color:aqua}
      .para2{position:absolute;top:50px;left:150px;z-index:0;border:solid;padding:80px;width:300px;background-color:#ff0}
      .para3{position:absolute;top:100px;left:180px;z-index:0;border:solid;padding:80px;width:300px;background-color:red}
    </style>
  </head>
  <body>
    <p class="para1" id="p1" onmouseover="toTop('p1')">Frame One</p>
    <p class="para2" id="p2" onmouseover="toTop('p2')">Frame Three</p>
    <p class="para3" id="p3" onmouseover="toTop('p3')">Frame Two</p>
    <script type="text/javascript">
      var top = 'p3';
      function toTop(newTop) {
        domTop = document.getElementById(top).style
        domNew = document.getElementById(newTop).style
        domTop.zIndex = "0"
        domNew.zIndex = "10"
        top = newTop
      }
    </script>
  </body>
</html>

＆＃13;

Answer 1

top似乎是一个保留变量 - 它会在您的函数中解析为window.top。尝试命名top之类的其他内容，例如_top，您不应该收到任何错误。

Answer 2

尝试将脚本更改为类似以下内容：

(function(window, document, undefined){

// code that should be taken care of right away

  window.onload = init;

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

})(window, document, undefined);

因此，在文档完全加载之前，它才会运行。我知道脚本是在你的身体声明的最后，但这仍然可能导致问题。此外，看起来您的功能从未实际调用过。您需要将其更改为IIFE或添加

toTop()

之后的功能

Javascript - getElementById（）即使元素存在也返回null

2 个答案: