我有一个完成的bootstrap 4网站，它是一个图片库。工作正常。但是，从来没有人孤单，我想在主页上加载为此目的制作的6张图像中的一张时，随机更改巨型机图像。
我正在使用的javascript不适用于巨型机。为了解决这个问题，我创建了一个简单的html页面，没有cdn或jquery链接。只是带有页面脚本标记的纯HTML和CSS。
我可以轻松地在image标签中切换普通的'ol图片文件。很好。但是，在div部分切换背景图片（在CSS中设置了背景）无法正常工作。
我已经尝试使用DOM开关进行各种变体，但是没有任何效果。
我有3个问题：
1 /有人可以让我知道javascript（不是jQuery）的语法是什么。
CSS规定了一个背景，而不是background-image或backgroundImage，它带有一个URL，而不是img标记的src。因此，我假设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>
最佳答案
应该
document.getElementById("header").style.background = "url('" + myPath +"')";