我有一个可以正常工作的 bootstrap 4 网站，它是一个图片库。它工作正常。但是，从来没有一个人会一个人呆着，我想在主页加载了为此目的制作的 6 张图片之一时随机更改超大屏幕图片。
我使用的 javascript 不适用于超大屏幕。为了解决这个问题，我创建了一个没有 cdn 或 jquery 链接的简单 html 页面。只是带有页内脚本标记的纯 html 和 css。
我可以轻松地在图像标签中切换普通的 'ol 图像文件。效果很好。但是在 CSS 中设置背景的部分 div 中切换背景图像是行不通的。
我尝试了 DOM 开关的各种变体，但没有任何效果。
我有 3 个问题:
1/有人可以告诉我 javascript(不是 jQuery)语法是什么吗？
CSS 规定了背景，而不是背景图像或背景图像，带有 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 +"')";
关于javascript - 使用javascript在页面加载时切换背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54638883/