Javascript：使用圖像 - 無法調用方法'setAttribute'null

我一直在嘗試修改我的網站http://www.gfcf14greendream.com/，通過使用javascript根據季節更改背景（並消除字體顏色的閱讀問題，即只要在後臺更改作品），圍繞一個簡單的函數工作：Javascript：使用圖像 - 無法調用方法'setAttribute'null

function setSeasonTheme() { 
    var today = new Date(); 
    var first = new Date(today.getFullYear(), 0, 1); 
    var dayYear = Math.round(((today - first)/1000/60/60/24) + .5, 0); 

    if (dayYear >= 1 && dayYear < 80) 
    { 
     document.getElementById("mainbg").setAttribute('src', "http://www.gfcf14greendream.com/images/winterbg.png");  
    } 
    if (dayYear >= 80 && dayYear < 172) 
    { 
     document.getElementById("mainbg").setAttribute('src', "http://www.gfcf14greendream.com/images/springbg.png");  
    } 
    if (dayYear >= 172 && dayYear < 264) 
    { 
     document.getElementById("mainbg").setAttribute('src', "http://www.gfcf14greendream.com/images/summerbg.png");  
    } 
    if (dayYear >= 264 && dayYear < 355) 
    { 
     document.getElementById("mainbg").setAttribute('src', "http://www.gfcf14greendream.com/images/fallbg.png");  
    } 
    if (dayYear >= 355 && dayYear <= 366) 
    { 
     document.getElementById("mainbg").setAttribute('src', "http://www.gfcf14greendream.com/images/winterbg.png");  
    } 

}

應該根據今年則是在當日改變頁面的背景下，修改在這個div img標籤：

<div id="background"> 
    <img id="mainbg" src="http://www.gfcf14greendream.com/images/greentwi.png" class="stretch" alt="" /> 
    </div>

但是仍然會顯示圖像的原始網址http://www.gfcf14greendream.com/images/greentwi.png。通過該功能，其src應爲http://www.gfcf14greendream.com/images/summerbg.png。權當調試器到達這條線，document.getElementById("mainbg").setAttribute('src', "http://www.gfcf14greendream.com/images/summerbg.png");，我得到這個錯誤：

Uncaught TypeError: Cannot call method 'setAttribute' of null

這究竟是爲什麼？如果顯示原始圖像，爲什麼背景的img標籤應爲null？感謝任何能夠提供幫助或建議的人。

來源

2013-06-23 gfcf14

我猜代碼在你的頁面完全加載之前執行 – Musa

你必須嵌入「對象」的標籤在你的頁面的html文件：

<object type="text/html" data="http://www.gfcf14greendream.com/thesitelog.html"...>

而且

http://www.gfcf14greendream.com/JS/greendream.js

在兩個頂部html和子HTML文件中聲明的腳本。而實際被調用的是子html中的一個（通過thesitelog.html的正文onload函數）。

在子HTML，如果您需要在父HTML訪問元素，你需要使用像

window.parent.document.getElementById('mainbg')

，而不是

document.getElementById('mainbg')

所以一個快速的解決辦法是更換全部

document

到

window.parent.document

在greendream.js

如果您嘗試訪問該元素是在像mainbg父元素，你可以註釋掉頂部HTML腳本標記：

<!--script type="text/javascript" src="http://www.gfcf14greendream.com/JS/greendream.js"></script-->

這應該可以解決你目前的錯誤。

來源

2013-06-23 02:29:30

非常感謝！這工作=）。所以請給我你的背景圖片的想法（這是我住在佛羅里達州的夏天，所以我就是這麼做的）。當然，我會改變字體顏色，但現在我已經有的代碼應該顯示每季不同的背景 – gfcf14

沒問題。是的，我現在正在看夏日形象。背景/頁面看起來很棒，但我不是設計師，所以不能給你專業建議。對於那個很抱歉。 –

適合我，謝謝 – gfcf14

很可能，該功能在頁面加載之前執行，因此在創建該圖像之前執行。如果你不關心jQuery，將你的代碼包裝在$（document）.ready（）或者window.onload（）中。

來源

2013-06-23 02:00:58

但是從頭部，http：//www.gfcf14greendream.com/header.html body標籤被寫成'」。並且函數'setSeasonTheme（）'在'startTime（）'中被調用。標題是否在帶有圖像的div之前的頁面中首先出現？ – gfcf14

Javascript：使用圖像 - 無法調用方法'setAttribute'null

回答

相關問題