javascript - Change div background image with JS - Stack Overflow

admin管理员组

文章数量:1324836

I am trying to place background images for divs with JS and change those images on mouse over and on click. I am trying to do it like this:

window.onload; {
    var replies = document.getElementsByClassName("reply-wrapper");
    var retweets = document.getElementsByClassName("retweet-wrapper");
    var favs = document.getElementsByClassName("fav-wrapper");

    for (var i = 0; i < replies.length; i++) {
        replies[i].style.backgroundImage = "url(images/reply.png);";
    }
    for (var i = 0; i < retweets.length; i++) {
        retweets[i].style.backgroundImage = "url(images/retweet.png);";
    }
    for (var i = 0; i < favs.length; i++) {
        favs[i].style.backgroundImage = "url(images/favorite.png);";
    }
}

But for some reason it won't work. Aprropriate divs have right classes and adding them to collection works fine, but placing images itself doesn't work. What am I doing wrong? P.S. Wanna write it in pure JS, no jQuery. P.P.S For some reason placing image with innerHTML works fine. Why?

I am trying to place background images for divs with JS and change those images on mouse over and on click. I am trying to do it like this:

window.onload; {
    var replies = document.getElementsByClassName("reply-wrapper");
    var retweets = document.getElementsByClassName("retweet-wrapper");
    var favs = document.getElementsByClassName("fav-wrapper");

    for (var i = 0; i < replies.length; i++) {
        replies[i].style.backgroundImage = "url(images/reply.png);";
    }
    for (var i = 0; i < retweets.length; i++) {
        retweets[i].style.backgroundImage = "url(images/retweet.png);";
    }
    for (var i = 0; i < favs.length; i++) {
        favs[i].style.backgroundImage = "url(images/favorite.png);";
    }
}

But for some reason it won't work. Aprropriate divs have right classes and adding them to collection works fine, but placing images itself doesn't work. What am I doing wrong? P.S. Wanna write it in pure JS, no jQuery. P.P.S For some reason placing image with innerHTML works fine. Why?

• javascript
• html
• css

Share Improve this question Follow edited Apr 26, 2015 at 18:56 tristantzara asked Apr 26, 2015 at 18:51 tristantzaratristantzara 5,91766 gold badges2828 silver badges4747 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

It looks like you've made a slight mistake when assigning your code to the window.onload event.

Your code needs to be in a function assigned to the onload event.

window.onload = function () { /* Your Code */ };

instead of:

window.onload; { /* Your Code /* }

There are two issues:

1. Like Jamie Dixon mentioned it needs to be window.onload = function(){}
2. favs[i].style.backgroundImage = "url(images/favorite.png);"; should be favs[i].style.backgroundImage = "url(images/favorite.png)"; The extra ; will cause your link not to work. So remove the extra semi-colon from the rest of your links.

Update with explanation:

#room1 {
  background-image: url('image/example.png');
}

In the example above you'll notice the semi-colon. Like in any programming language this is to say that this is the end of the mand. Sometimes semi-colon's are optional ( like in certain cases found in js ).

JS isn't CSS. Even if you apply a style to your html element, you are using JS and not CSS. This is why you don't need the ; inside the quotes.

The event handler window.onload needs to be assigned a function to invoke. So, you just need to add the keyword 'function' before the block of code and then assign that to window.onload. Additionally, if you want to play nice with other code on the page you could grab a reference to any existing onload handler and then invoke in your onload function.

var oldOnLoad = window.onload;

window.onload = function() {
  if (typeof oldOnLoad === 'function') {
    oldOnLoad();
  }
  var replies = document.getElementsByClassName("reply-wrapper");
  var retweets = document.getElementsByClassName("retweet-wrapper");
  var favs = document.getElementsByClassName("fav-wrapper");

  for (var i = 0; i < replies.length; i++) {
    replies[i].style.backgroundImage = "url(images/reply.png)";
  }
  for (var i = 0; i < retweets.length; i++) {
    retweets[i].style.backgroundImage = "url(images/retweet.png)";
  }
  for (var i = 0; i < favs.length; i++) {
    favs[i].style.backgroundImage = "url(images/favorite.png)";
  }
};

Note: it might be worth mentioning that loading the background images in the onload event handler could cause your page to appear to load slow because it will wait for all other content on the page to finish loading. You might want to do something like instead:

<div id="reply-wrapper" style="display: block; width: 250px; height: 250px;"></div>
<script>
(function() {
    document.getElementById('reply-wrapper').style.backgroundImage = "url(//dummyimage./250x250/000/fff)";
})();
</script>

I don't see a function name for the code. Is it inplete?
this might be the error.

window.onLoad;  

Try this:

function fn_load(){
 // Your statements
 }

and in the body do this:

i should be:

window.onload = function() {
var replies = document.getElementsByClassName("reply-wrapper");
var retweets = document.getElementsByClassName("retweet-wrapper");
var favs = document.getElementsByClassName("fav-wrapper");

for (var i = 0; i < replies.length; i++) {
    replies[i].style.backgroundImage = "url(images/reply.png);";
}
for (var i = 0; i < retweets.length; i++) {
    retweets[i].style.backgroundImage = "url(images/retweet.png);";
}
for (var i = 0; i < favs.length; i++) {
    favs[i].style.backgroundImage = "url(images/favorite.png);";
}
} 

you DOM is calling even before window got load.

本文标签： javascriptChange div background image with JSStack Overflow