Question

我有这个javascript函数来触发body onload函数，但我无法让它工作。我在这做错了什么？这是我的fiddle和以下代码：

HTML：

<body onload="loading()">
    <div id="container">
    </div>
</body>

JS：

function loading(){   
  document.getElementById('container').css("background-image", "none");
}

也尝试了

function loading(){   
  document.getElementById('container').cssText = "background-image: none";
}

CSS：

body{
  background: #000;
}
#container {
width: 600px;
height: 500px;
margin:0 auto;
background-image: url("http://lamininbeauty.co.za/images/gallery/loading.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}

Answer 1

尝试：

function loading(){   
  document.getElementById('container').style.backgroundImage= "none";
}

Answer 2

你混淆了原生的javascript和jQuery，原生DOM元素上没有css方法：

function loading(){   
  document.getElementById('container').style.backgroundImage = "none";
}

Answer 3

function loading(){   
  document.getElementById('container').style.backgroundImage = "none";
}

Answer 4

确保您的js已加载到页面的部分。

或者，您只能添加

$(function() {
$('#container').css("background-image", "none");
}

在你的js中

并从身体上删除onload

我假设你正在使用jquery，否则上面的解决方案是要走的路

Answer 5

getElementById返回一个没有方法.css()的html元素。它的jQuery有这个方法，你也有你的函数在onload所以它包装在一个函数中，你想要它没有包装头。

http://jsfiddle.net/3pDsJ/35/

Answer 6

问题在于jsfiddle设置为运行您定义的javascript onLoad，因此我怀疑发生的事情是在定义onload=方法之前遇到loading()属性。如果打开控制台，您可以看到错误“未捕获的ReferenceError：未定义加载”（或类似的东西）。

您可以将其更改为“no wrap（head）”，它应该可以正常工作。虽然如上所述，您需要将css方法更改为实际有效的方法。

我想说一个更简单的解决方案就是使用jquery。使用元素的onload处理程序不再是一种好习惯（我认为它们现在实际上已被弃用了吗？）。最好的解决方案是一个名为“unobtrusive javascript”的解决方案，其中您执行的任何js都不需要从您的html代码中进行额外的javascript或方法调用。我修改了小提琴来举个例子：

http://jsfiddle.net/3pDsJ/38/

Answer 7

我还没有看到的答案是你的脚本标签必须在你的身体标签内。这是因为脚本标记必须在正文加载之前加载，否则您将收到一条错误，指出未定义加载函数。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="YourCSS.css" />
</head>
<body onload="loading()">
    <div id="container">
    </div>
    <script type="text/javascript">
        function loading(){   
            $("#container").attr("style", "background-image: none;");
        };
    </script>
</body>
</html>

Simple Body onload功能不会触发我的功能

7 个答案: