admin管理员组文章数量:1323723
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?
Share Improve this question edited Apr 26, 2015 at 18:56 tristantzara asked Apr 26, 2015 at 18:51 tristantzaratristantzara 5,9176 gold badges28 silver badges47 bronze badges 05 Answers
Reset to default 3It 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:
- Like Jamie Dixon mentioned it needs to be
window.onload = function(){}
favs[i].style.backgroundImage = "url(images/favorite.png);";
should befavs[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
版权声明:本文标题:javascript - Change div background image with JS - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742122951a2421807.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论