使用javascript切换页面加载背景

Question

I have a finished working bootstrap 4 website that is an image gallery. 我有一个完成的bootstrap 4网站，它是一个图片库。 It works fine. 工作正常。 However, never one to leave well alone, I want to randomly change the jumbotron image when the home page is loaded with one of 6 images made for that purpose. 但是，从来没有人孤单，我想在主页上加载为此目的制作的6张图像中的一张时，随机更改巨型机图像。

The javascript I am using is not working for the jumbotron. 我正在使用的javascript不适用于巨型机。 To sort out the issue, I have created a simple html page with no cdn's or jquery links. 为了解决这个问题，我创建了一个简单的html页面，没有cdn或jquery链接。 Just pure html and css with an in-page script tag. 只是带有页面脚本标记的纯HTML和CSS。

I can easily switch the plain 'ol image file in the image tag. 我可以轻松地在image标签中切换普通的'ol图片文件。 That works great. 效果很好。 But to switch a background image in the section div which has a background set in CSS is not working. 但是，在div部分切换背景图片（在CSS中设置了背景）无法正常工作。

I have tried all sorts of variations with the DOM switch but nothing works. 我已经尝试使用DOM开关进行各种变体，但是没有任何效果。

I have 3 questions: 我有3个问题：

1/ Can someone please let me know what the javascript (not jQuery) syntax is for that. 1 /有人可以让我知道javascript（不是jQuery）的语法是什么。

The CSS stipulates a background, not a background-image or backgroundImage, with a URL, not src as does the img tag. CSS规定了一个背景，而不是background-image或backgroundImage，它带有一个URL，而不是img标记的src。 So I am assuming that the javascript would use = url(the path to the image). 因此，我假设javascript将使用= url（图像的路径）。

But I may be wrong or I may be missing a set of brackets or something. 但是我可能错了，或者我可能缺少括号或其他东西。

Since the CSS uses a relative path, I am assuming that the javascript would do the same. 由于CSS使用相对路径，因此我假设javascript将执行相同的操作。 Adding in the root folder does not seem to accomplish anything, but that may be the rest of the DOM switch syntax causing the problem. 在根文件夹中添加似乎没有完成任何操作，但这可能是导致问题的DOM开关语法的其余部分。

2/ I am using an onLoad in the body tag to call the javascript. 2 /我在body标签中使用onLoad来调用javascript。 Is this best practice or should I be using an event listener in the javascript file looking out for the completed page load. 这是最佳做法，还是应该在javascript文件中使用事件监听器，以查找完成的页面加载。

3/ Is there a better way to implement the image switch? 3 /是否有更好的方法来实现图像切换？ I'm not looking for anything fancy, but just want to make sure that I'm using a common procedure. 我不是在寻找任何花哨的东西，而只是想确保我使用的是通用过程。

My html, which includes all the CSS and javascript is as follows: 我的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

You have to set the backgroundImage in a proper format: 您必须以适当的格式设置backgroundImage：

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

check this link: Style background Property 检查此链接： Style background属性

使用javascript切换页面加载背景

问题描述

2 个解决方案

解决方案1
2 2019-02-11 20:52:51

解决方案2
1 2019-02-11 21:05:17

使用javascript切换页面加载背景

问题描述

2 个解决方案

解决方案1 2 2019-02-11 20:52:51

解决方案2 1 2019-02-11 21:05:17

解决方案1
2 2019-02-11 20:52:51

解决方案2
1 2019-02-11 21:05:17