使用javascript在页面加载时切换后台
我有一个完成工作的Bootstrap4网站，这是一个图像库。它很好用。然而，从来没有一个离开好，我想随机改变jumbotron图像时，主页上加载了6个图像之一的目的 我使用的javascript不适用于jumbotron。为了解决这个问题，我创建了一个没有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，如下所示：使用javascript在页面加载时切换后台,javascript,css,image,background,Javascript,Css,Image,Background,我有一个完成工作的Bootstrap4网站，这是一个图像库。它很好用。然而，从来没有一个离开好，我想随机改变jumbotron图像时，主页上加载了6个图像之一的目的 我使用的javascript不适用于jumbotron。为了解决这个问题，我创建了一个没有cdn或jquery链接的简单html页面。只需纯html和css，并带有页面内脚本标记 我可以轻松地切换图像标签中的普通“ol”图像文件。这很有效。但是在CSS中设置了背景的分区div中切换背景图像是不起作用的 我尝试过DOM开关的各种变体，
<!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>
#标题{
背景：url（“images/header02.jpg”）中心不重复；
宽度：100%；
高度：400px；
}
函数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/”+项目；
document.getElementById（“myImg”）.src=myPath；
document.getElementById（“header”）.style.background=myPath；
}
document.getElementById("header").style.background = "url('" + myPath +"')";
document.getElementById("header").style.background = "url('" + myPath +"')";
您必须以适当的格式设置背景图像：
document.getElementById("header").style.backgroundImage = "url('" + path + "')";
检查此链接：您必须以正确的格式设置背景图像：
document.getElementById("header").style.backgroundImage = "url('" + path + "')";
检查此链接：有效。也要感谢代码963。看，这就是前端和后端一样困难的原因。不客气。请接受我的答案：）选择一个你认为是解决你问题的最佳答案。若要将答案标记为已接受，请单击答案旁边的复选标记，将其从灰色变为已填写。这样做有效。也要感谢代码963。看，这就是前端和后端一样困难的原因。不客气。请接受我的答案：）选择一个你认为是解决你问题的最佳答案。要将答案标记为已接受，请单击答案旁边的复选标记，将其从灰显切换为已填写。