“未捕獲的類型錯誤：無法在 .. 處讀取 null 的屬性‘樣式’”

Question

我在另一個文檔中練習了如下所示的樣式，它在段落和按鈕上工作，但是，對於 div，它拒絕這樣做。

第一個document.getElementById('red').style.width="100px"; 語句返回錯誤

“未捕獲的類型錯誤：無法在 .. 處讀取 null 的屬性‘樣式’”

當我在另一個文檔中嘗試它時，它無需將樣式放在function myFunction() {}語句中即可工作

有什么想法嗎？

<div class="red" > some content</div>
<div class="blue" > some content</div>
<div class="green" > some content</div>

<script type="text/javascript">

document.getElementById('red').style.width="100px";
document.getElementById('blue').style.width="100px";
document.getElementById('green').style.width="100px";
document.getElementById('red').style.height="100px";
document.getElementById('blue').style.height="100px";
document.getElementById('green').style.height="100px";
document.getElementById('red').style.backgroundColor="red";
document.getElementById('blue').style.backgroundColor="blue";
document.getElementById('green').style.backgroundColor="green";
document.getElementById('red').style.borderRadius="50px";
document.getElementById('blue').style.borderRadius="50px";
document.getElementById('green').style.borderRadius="50px";

document.getElementById('red').onclick.display="none";
document.getElementById('blue').onclick.display="none";
document.getElementById('green').onclick.display="none";

</script>

Answer 1

Cannot read property 'style' of null這給了你很好的提示 - of null 。 這確實意味着，它沒有找到您正在尋找的元素。

這僅僅是因為在 html 中您使用的是類<div class="red">

和 javascript document.getElementById('red') ids

堅持上課：

document.getElementsByClassName('red')[0]

或轉換為 id

<div id="red">

Answer 2

我認為您需要將 id 添加到您的 div 中

<div class="red" id="red" > some content</div>

document.getElementById('red').style.width="100px";

Answer 3

將“class='xxx'”更改（或添加）為“id='xxx'”，即可通過對應的ID獲取元素。 否則你可以嘗試使用https://www.w3schools.com/jsreF/met_document_getelementsbyclassname.asp

Answer 4

選擇登陸頁面元素。

let landingPage = document.querySelector("landing-page");

獲取數組圖像。

let imgsArray = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]

更改背景圖像 URL。

landingPage.style.backgroundImage = 'imgs./imgaes/"2.jpg"'