0

我一直在尝试修改我的网站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="https://i.stack.imgur.com/USDq5.png" class="stretch" alt="" />
  </div>

但是，图像的原始 URL 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？感谢任何可以为我提供帮助或建议的人。

4

2 回答 2

1

您在页面的“对象”标签中嵌入了一个 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 标签：

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

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

于 2013-06-23T02:29:30.263 回答
0

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

于 2013-06-23T02:00:58.847 回答