1

簡単な質問があります。HTML5 に onload イベントを取り込もうとしています。ここに私のコードがありますが、動作しません。私が間違っていることを教えてください。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Animation</title>

    <script>
        document.getElementById('videoBackground').onload = function()
        {
            document.body.style.backgroundColor = 'black';
        }
    </script>

    <script type="text/javascript" src="js/animCD.js"></script>    
    <link rel="stylesheet" href="style.css" type="text/css" />

    </head>
    <body>

    <video id="videoBackground" poster="img/loading.png" onload="function()" width="1920" height="1080" preload="auto" onprogress="animCD_onprogress();" onended="animCD_start();">
        <source id="colorVid_mp4" type="video/mp4" src="img/luther_color.mp4">      
    </video>
4

2 に答える 2

1

getElementById('videoBackground')IDを持つ要素を実行している時点では、videoBackgroundまだ存在していません。

要素を作成した場所の下にスクリプトを移動するか、 。videoBackgroundを使用してDOMがロードされた後にスクリプトを実行しますdocument.onload。

于 2012-11-21T04:01:33.987 に答える
1

指定someElement.onload = function() { } は、一般的な意味で onload ハンドラーを作成する方法です。機能しない理由は、スクリプト ブロックが問題の要素の前に来てすぐに実行されるためです。その時点document.getElementById()ではまだ解析されていないため、その要素を見つけることができません。

これを修正するには、スクリプト ブロックを要素の後ろに移動するか (多くの人はスクリプトを本文の最後に置きます)、ページの onload ハンドラで呼び出します。

window.onload = function() {
    document.getElementById('videoBackground').onload = function() {
        document.body.style.backgroundColor = 'black';
    }
};

ページ/ウィンドウの onload は、すべてのコンテンツが読み込まれた後に呼び出す必要がありますが、そこからさらに onload ハンドラーを作成する意味があるかどうかはわかりません。

onload="function()"html にも属性があることに気付きました。これはハンドラーを指定する別の方法ですが、インライン イベント属性は推奨される方法ではありませんが、onload="someFunction()"別の場所で定義された名前付き関数を呼び出すには実際の関数名を指定するか、コードを直接配置する必要があります。

<video ... onload="document.body.style.backgroundColor='black';" ...>
于 2012-11-21T03:59:08.987 に答える