用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>