Question

我有工作代码，用我的gif随机更改body的背景。

var totalCount = 11;
function ChangeIt() {
  var num = Math.ceil( Math.random() * totalCount );
  document.body.background = '/static/img/'+num+'.gif';
  document.body.style.backgroundRepeat = "repeat";
  }
window.onload = ChangeIt;

现在我想将它与另一个HTML元素（例如div之一）一起使用。将document.body.background更改为document.getElementById('id').background并不起作用。我该如何更改代码？

Answer 1

你试过这个吗？

document.getElementById('id').style.backgroundImage = "url('/static/img/" + num + ".gif')";

此外，带有Math.ceil()的RNG表示图片基于1而不是0：

1.gif
2.gif
...
11.gif

如果不是这种情况，请使用Math.floor()：

0.gif
1.gif
...
10.gif

根据元素的不同，您可能需要设置其尺寸（宽度和高度）。这是一个示例HTML元素：

<div id="imagediv" style="width: 320px; height: 640px; background-repeat: repeat;"></div>

结果代码：

var totalCount = 11;

window.onload = function () {
  var num, node;

  num = Math.ceil(Math.random() * totalCount);
  node = document.getElementById("imagediv");

  node.style.backgroundImage = "url('/static/img/" + num + ".gif')";
};

Answer 2

这应该是正确的语法：

document.getElementById('id').style.backgroundImage = "url('img_tree.png')";

Answer 3

document.body.background主要用于身体背景但不适用于其他html元素。所以使用此document.getElementById('id').style.backgroundImage = "url(..)";

var totalCount = 11;
function ChangeIt() {
  var divs =document.getElementById('id');
  var num = Math.ceil( Math.random() * totalCount );
  divs.style.backgroundImage = 'url(/static/img/'+num+'.gif)';
  divs.style.backgroundRepeat = "repeat";
  divs.style.height = "300px"; //testing
  }
window.onload = ChangeIt;

使用JS随机化背景img

3 个答案: