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

指定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 回答
1

在您执行getElementById('videoBackground')具有 id 的元素的位置videoBackground还不存在。

将脚本移到您创建videoBackground元素的位置下方，或者在 DOM 加载后使用document.onload.

于 2012-11-21T04:01:33.987 回答