使用javascript切換頁面加載背景

Question

我有一個完成的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>

Answer 1

應該

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

Answer 2

您必須以適當的格式設置backgroundImage：

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

檢查此鏈接： 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