的JavaScript改變元素的風格 - 讓錯誤

我試圖用JavaScript來改變元素的風格，但是，當我嘗試我得到這個錯誤：test.html:4 Uncaught TypeError: Cannot read property 'style' of null at test.html:4的JavaScript改變元素的風格 - 讓錯誤

這是我的代碼：

<html> 
<head> 
    <script type="text/javascript"> 
    document.getElementById("test").style.marginTop="20px"; 
    </script> 
</head> 
<body> 
    <p id="test"> 
    this is a test 
    </p> 
</body> 
</html>

我是JavaScript新手，非常抱歉，如果我正在做一些完全錯誤的事情，但對我來說一切似乎都很好。我可能在做一些愚蠢的錯誤。

來源

2017-06-14 MTMaster

可能的重複[爲什麼jQuery或諸如getElementById之類的DOM方法找不到元素？]（https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method- such-getelementbyid-not-the-element） – Xufox

包起來的事件監聽器這樣

window.onload = function(event){ 
    document.getElementById("test").style.marginTop="20px"; 
}

所以當元素變得可用時，您可以使用它。當前元素不可用，因爲它在頁面加載之前嘗試獲取元素。所以在元素可用時運行代碼就像上面一樣包裝它。

來源

2017-06-14 01:11:41

這是一個運行時錯誤。您的JavaScript嘗試訪問執行語句時尚不存在的元素。將您的JavaScript代碼塊移到文檔的底部。

來源

2017-06-14 01:04:57

這裏的問題將是該腳本在div之前執行，id="test"位於頁面上。您可以將代碼移動到頁面的底部或添加加載時，像這樣的窗口的事件偵聽器：

<script type="text/javascript"> 
    window.addEventListener('load', function(){ 
     document.getElementById("test").style.marginTop="20px"; 
    }); 
</script>

來源

2017-06-14 01:09:03 maddockst

您的JavaScript代碼在document之前執行，p標記已創建。
要修復該問題，請將代碼放在body標記的底部或文檔加載完成事件中。

<html> 
    <head> 
    </head> 
    <body> 
    <p id="test"> 
     this is a test 
    </p> 
    <script type="text/javascript"> 
     document.getElementById("test").style.marginTop="20px"; 
    </script> 
    </body> 
</html>

此外，將腳本放置在「body」元素的底部可提高顯示速度，因爲腳本編譯可能會降低顯示速度。

來源

2017-06-14 01:13:22 MaxZoom

這是最好的答案，但您需要將腳本標記放在身體關閉標記之前。 –

的JavaScript改變元素的風格 - 讓錯誤

回答

相關問題