I have this javascript function to trigger with the body onload function, but I cannot get it to work. What am I doing wrong here? Here is my fiddle and code below:
HTML:
<body onload="loading()">
<div id="container">
</div>
</body>
JS:
function loading(){
document.getElementById('container').css("background-image", "none");
}
also tried
function loading(){
document.getElementById('container').cssText = "background-image: none";
}
CSS:
body{
background: #000;
}
#container {
width: 600px;
height: 500px;
margin:0 auto;
background-image: url(".png");
background-repeat: no-repeat;
background-position: 50% 50%;
}
I have this javascript function to trigger with the body onload function, but I cannot get it to work. What am I doing wrong here? Here is my fiddle and code below:
HTML:
<body onload="loading()">
<div id="container">
</div>
</body>
JS:
function loading(){
document.getElementById('container').css("background-image", "none");
}
also tried
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%;
}
7 Answers
Reset to default 2Try:
function loading(){
document.getElementById('container').style.backgroundImage= "none";
}
You are confusing native javascript and jQuery, there's no css method on native DOM Element:
function loading(){
document.getElementById('container').style.backgroundImage = "none";
}
getElementById returns an html element which has no method .css(). Its jQuery that has that method, also you have your function in onload so its wrapped in a function, you want it in no wrap head.
http://jsfiddle/3pDsJ/35/
function loading(){
document.getElementById('container').style.backgroundImage = "none";
}
Make sure that your js is loaded in section of your page.
Alternatively, you can only add
$(function() {
$('#container').css("background-image", "none");
}
in your js and remove the onload from body
I am assuming that you are using jquery, else the above solution is the way to go
The problem is that jsfiddle is set to run your defined javascript onLoad so what I suspect is happening is it encounters your onload= attribute before the loading() method has been defined. If you open up a console you can see an error "Uncaught ReferenceError: loading is not defined" (or something similar).
You can change that to "no wrap (head)" and it should work just fine. Although as mentioned you need to change the css method to something that actually works.
I would say an easier solution would be to just use jquery. It's no longer considered good practice to use the onload handlers of elements (I think they're actually deprecated now?). The best solution is one called "unobtrusive javascript" where any js you execute doesn't require additional javascript or method calls from your html code. I've modified the fiddle to give an example:
http://jsfiddle/3pDsJ/38/
An answer I have not seen yet is that your script tag must be inside your body tag. This is because the script tag must load before the body loads or you will get an error stating that the loading function is not defined.
<!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>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742320265a4421667.html
评论列表（0条）