1

我有这个javascript函数可以用body onload函数触发，但我无法让它工作。我在这里做错了什么？这是我的小提琴和下面的代码：

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%;
}​
4

7 回答 7

2

尝试：

function loading(){   
  document.getElementById('container').style.backgroundImage= "none";
}
于 2012-08-23T20:26:05.573 回答
2

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

function loading(){   
  document.getElementById('container').style.backgroundImage = "none";
}
于 2012-08-23T20:26:34.833 回答
1 
function loading(){   
  document.getElementById('container').style.backgroundImage = "none";
}
于 2012-08-23T20:25:13.530 回答
1

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

或者，您只能添加

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

在您的 js 中并从正文中删除 onload

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

于 2012-08-23T20:27:24.490 回答
1

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

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

于 2012-08-23T20:28:48.143 回答
1

问题是 jsfiddle 设置为运行您定义的 javascript onLoad，所以我怀疑正在发生的事情是它在定义方法onload=之前遇到了您的属性loading()。如果你打开一个控制台，你会看到一个错误“Uncaught ReferenceError: loading is not defined”（或类似的东西）。

您可以将其更改为“无包装（头部）”，它应该可以正常工作。尽管如上所述，您需要将css方法更改为实际有效的方法。

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

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

于 2012-08-23T20:31:21.010 回答
0

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

<!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>
于 2012-08-23T20:32:48.863 回答