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

回答

相关问题