在 div 中随机显示背景图片

Question

在 div 中随机显示背景图片

3

我有一个“容器”DIV，它可以缩放以适应窗口的100％，我想将随机图像加载到该DIV中。我有一个可以用于html背景的工作脚本，但我无法使其在DIV上工作。

有什么建议吗？

以下是原始脚本：

<script type="text/javascript">
    var imgCount = 3;
    var dir = 'images/';
    var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
    var images = new Array
            images[1] = "bg-01.jpg",
            images[2] = "bg-02.jpg",
            images[3] = "bg-03.jpg",
    document.body.style.backgroundImage = "url(" + dir + images[randomCount] + ")"; </script>

- Craig Jonathan Kristensen

那么 div 的问题是什么？请展示你的代码，其中你试图为一个 div 设置背景，而不是 body。 - Viktor S.

2个回答

1

document.body.style.backgroundImage会将背景设置为<body>

你可以通过以下方式轻松地强制它为所选的

做到这一点：

document.getElementById('divID').style.backgroundImage = "url(" + dir + images[randomCount] + ")";

- Andy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Viktor S. · Accepted Answer

这应该不成问题。只需找到该 div 元素，例如使用 document.getElementById()，并为其应用一个背景图像：

<div id="divID"></div>
<script type="text/javascript">
    var imgCount = 3;
        var dir = 'images/';
        var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
        var images = new Array
                images[1] = "bg-01.jpg",
                images[2] = "bg-02.jpg",
                images[3] = "bg-03.jpg",
        document.getElementById("divID").style.backgroundImage = "url(" + dir + images[randomCount] + ")"; 
   </script>

但请注意，上述脚本块必须放在您需要更新的 div 之后。否则，在脚本执行时，div 将不会在 DOM 中可用，document.getElementById 将找不到任何内容。