无法读取属性'样式'null

还有很多其他的问题关于这个完全相同的错误，但我没有找到任何解决方案。无法读取属性'样式'null

下面是HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>ChatRoom</title> 
    <link rel="stylesheet" href="css/style.css"> 
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'> 
    <script src="js/main.js"></script> 
</head> 
<body> 
    <div id="container"> 
     <div id="logo"> 
      <a href="./"> 
       <h1>ChatRoom</h1> 
       <h3>Basic Chatroom<h3> 
      </a> 
     </div> 
     <div id="joinForm"> 
      <div class="tHeader"> 
       <h2>Join A ChatRoom</h2> 
      </div> 
      <div class="formArea"> 
       <form action="joinRoom.php" method="GET"> 
        <h3>Name Of Room:</h3> 
        <input type="text" name="roomName" class="jmInput" placeholder="Name Of Room"> 
        <h3 class="margin-top">Password:</h3> 
        <input type="text" name="roomName" class="jmInput" placeholder="Password"> 
        <input type="submit" name="roomName" class="jmInput" value="Join ChatRoom"> 
       </form> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

这里是JS：

window.onload = fadeIn(); 

function fadeIn() { 
var el = document.getElementById('joinForm'); 
el.style.opacity = 0; 

(function fade() { 
    var val = parseFloat(el.style.opacity); 
    if(!((val += .1) > 1)) { 
     el.style.opacity = val; 
     requestAnimationFrame(fade); 
    } 
})(); 
}

显然莫名其妙的document.getElementById（ 'joinForm'）为空。我真的不知道我该如何解决这个问题。

任何帮助将大规模赞赏。在此先感谢：）

来源

2015-09-10 Skosh

window.onload = fadeIn();调用fadeIn，并指定其返回值window.onload，完全相同的方式x = foo()电话foo，并指定其返回值x。因此您的fadeIn未在等待load事件。所以大概你用getElementById查找的元素还不存在，所以getElementById返回null。

取出()分配的功能参考：

window.onload = fadeIn;

边注：load事件发生非常在页面加载过程中下旬，等待所有的图像和其他外部资源加载。通常，您只想将script标签放在页面的最底部，即在关闭</body>标签之前，立即运行您的功能 —它将有权访问所有元素，因为它们在其上定义。但如果您有等待load的原因，只需删除()即可。

来源

2015-09-10 14:09:00

无法读取属性'样式'null

回答

相关问题