Question

我有一个完成的bootstrap 4网站，它是一个图片库。工作正常。但是，从来没有一个人会孤单，我想在主页上加载为此目的制作的6张图像之一时，随机更改巨无霸图像。

我正在使用的javascript不适用于巨型机。为了解决这个问题，我创建了一个简单的html页面，没有cdn或jquery链接。只是带有页面脚本标签的纯HTML和CSS。

我可以轻松地在image标签中切换普通的'ol图片文件。效果很好。但是，要在div部分中切换背景图片（在CSS中设置了背景）无法正常工作。

我尝试使用DOM开关进行各种变体，但没有任何效果。

我有3个问题：

1 /有人可以让我知道javascript（不是jQuery）的语法是什么。

CSS规定背景（而不是background-image或backgroundImage）使用URL（而不是src）与img标签一样。因此，我假设javascript将使用= url（图像的路径）。

但是我可能错了，或者我可能缺少一组括号或其他东西。

由于CSS使用相对路径，因此我假设javascript也会这样做。在根文件夹中添加文件似乎并没有完成任何操作，但这可能是导致问题的DOM开关语法的其余部分。

2 /我正在body标记中使用onLoad来调用javascript。这是最佳做法，还是我应该在javascript文件中使用事件监听器，以查找完成的页面加载。

3 /是否有更好的方法来实现图像切换？我不是想找任何花哨的东西，而只是想确保我使用的是通用程序。

我的html（包括所有CSS和javascript）如下：

 <!DOCTYPE html>
 <html>
 <head>
 <style>
#header {
    background: url("images/header02.jpg") center center no-repeat;
    width: 100%;
    height: 400px;
}
 </style>
 </head>

 <body onLoad="myHeaderFunction()">

<img id="myImg" src="images/header05.jpg" width="900" height="200" alt="test image">

<section id="header"> </section>

<script>
    function myHeaderFunction() {
        var myImageArray = ["header01.jpg", "header02.jpg", "header03.jpg", "header04.jpg", "header05.jpg"];
        var item = myImageArray[Math.floor(Math.random()*myImageArray.length)];
        var myPath = "images/" + item;
        document.getElementById("myImg").src = myPath;
        document.getElementById("header").style.background = myPath;
    }
</script>

 </body>
  </html>

Answer 1

应该是

document.getElementById("header").style.background = "url('" + myPath +"')";

Answer 2

您必须以适当的格式设置backgroundImage：

document.getElementById("header").style.backgroundImage = "url('" + path + "')";

检查此链接：Style background Property

使用javascript切换页面加载背景

2 个答案: