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有正确的类，并将它们添加到收集工作正常，但放置图像本身不起作用。我究竟做错了什么？附：想用纯JS编写它，没有jQuery。 P.P.S出于某种原因，使用innerHTML放置图像工作正常。为什么呢？

Answer 1

在将代码分配给window.onload事件时，您似乎犯了一个小错误。

您的代码必须位于分配给onload事件的函数中。

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

而不是：

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

Answer 2

有两个问题：

像Jamie Dixon提到的那样需要window.onload = function(){}
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 3

需要为事件处理程序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>

Answer 4

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

String input =  "©†¿™";

试试这个：

char$ 1 © equals 169
char$ 2 † equals 8224
char$ 3 ¿ equals 191
char$ 4 ™ equals 8482
©†¿™

并在身体中这样做：

Answer 5

我应该是：

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也在调用。

用JS改变div背景图像

5 个答案: