用JS更改div背景图像

Question

我想把JS的背景图像放在div上，并在鼠标上点击更改这些图像。我试图这样做：

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);"; 
    } 
} 

但由于某种原因，它将无法正常工作。适当的div有正确的类，并将它们添加到收集工作正常，但放置图像本身不起作用。我究竟做错了什么？ P.S.想用纯JS编写它，不要使用jQuery。 P.P.S出于某种原因，使用innerHTML放置图像效果很好。为什么？

Answer 1

这里有两个问题：

1. 像杰米·狄克逊提到它需要window.onload = function(){}
2. favs[i].style.backgroundImage = "url(images/favorite.png);";应该是favs[i].style.backgroundImage = "url(images/favorite.png)";额外;将导致您的链接不工作。因此，从其他链接中删除多余的分号。

更新并提供了解释：

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

在你上面的例子会发现分号。就像在任何编程语言中一样，这就是说这是命令的结尾。有时候分号是可选的（就像在js中发现的某些情况一样）。

JS不是CSS。即使您将风格应用于您的html元素，您使用的是JS而不是CSS。这就是为什么你不需要引号内的;。

Answer 2

将代码分配给window.onload事件时，看起来你犯了一个小错误。

您的代码需要分配给onload事件的功能。

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

代替：

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

Answer 3

我没有看到一个函数名称的代码。 它不完整？
这可能是错误。

window.onLoad; 

试试这个：

function fn_load(){ 
// Your statements 
} 

，并在体内做到这一点：

Answer 4

我应该是：

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);"; 
} 
} 

你DOM呼吁甚至在窗口拿到负荷。

Answer 5

事件处理程序window.onload需要分配一个函数来调用。因此，您只需在代码块前添加关键字'function'，然后将其分配给window.onload。另外，如果你想和页面上的其他代码一起玩，你可以获取任何现有的onload处理器的引用，然后在你的onload函数中调用。

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)"; 
 
    } 
 
};

注：它可能是值得一提的是，加载在onload事件处理程序的背景图像可能会导致自己的网页显示加载缓慢，因为它会等待页面上的所有其他内容完成加载。你可能想这样做，而不是：

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