Question

我一直在尝试修改我的网站http://www.gfcf14greendream.com/，使用javascript根据季节更改背景（并消除字体颜色的阅读问题，一旦背景更改有效），解决了一个简单的功能：

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？感谢能够为我提供帮助或建议的任何人。

Answer 1

您的网页中的'object'标记中嵌入了html文件：

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

脚本

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

在top html和sub html文件中声明。实际调用的是sub html中的那个（通过thesitelog.html的body onload函数）。

在子HTML中，如果你需要访问父html中的元素，你需要使用像

这样的东西

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

而不是

document.getElementById('mainbg')

因此，快速解决方法是更换 ~~all~~

document

到

window.parent.document

在greendream.js中如果您尝试访问的元素位于父元素（如mainbg ）中，并且您可以在顶部html中注释掉脚本标记：

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

这应该可以解决您当前的错误。

Answer 2

最有可能的是，此功能在页面加载之前执行，因此在创建该图像之前执行。如果你不关心jQuery，请将你的代码包装在$（document）.ready（）或window.onload（）中。

Javascript：使用图像 - 无法调用null的方法'setAttribute'

2 个答案: