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

ページの「object」タグに HTML ファイルが埋め込まれています。

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

そして、スクリプト

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

トップhtmlファイルとサブhtmlファイルの両方で宣言されています。そして、実際に呼び出されたのは、サブ html にあるものです (thesitelog.html の body onload 関数によって)。

サブHTMLで、親HTMLの要素にアクセスする必要がある場合は、次のようなものを使用する必要があります

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

それ以外の

document.getElementById('mainbg')

したがって、迅速な修正はすべてを交換することです

document

に

window.parent.document

アクセスしようとしている要素がmainbgのような親要素にある場合、 greendream.jsで、トップ 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 に答える