無法讀取屬性'樣式'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

回答

相關問題