Question

我正在重新设计一个出现问题的网站。我想更改<body>的背景图片，并且能够成功更改它，但是当我在<div>标记中放置另一个背景图片并想要同时更改它时，<body>背景图片已成功更改，但<div>的背景图片并未随之更改。

下面是代码。

HTML：

<div id="firstimage">
</div>
<div class="bullets">
    <ul>
         <a href="#"><li onclick="backgroundImage1()">&#9898;</li></a>
         <a href="#"><li onclick="backgroundImage2()">&#9898;</li></a>
         <a href="#"><li onclick="backgroundImage3()">&#9898;</li></a>
    </ul>
</div>

CSS：

body {
    width: 100%;
    background-image: url(homepage-BG-handmade.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

#firstimage {
    margin-top: 200px;
    width: 700px;
    height: 200px;
    background-image: url(handcrafted-menswear1.png);
    background-position: center;
    margin-left: auto;
    margin-right: auto;
}

JavaScript的：

function backgroundImage1() {
    document.body.style.backgroundImage = "url('homepage-BG-handmade.jpg')";
    document.getElementById("firstimage").style.backgroundImage =
        "url('handcrafted-menswear1.png')";
}

function backgroundImage2() {
    document.body.style.backgroundImage = "url('New-Shirts-BG1.jpg')";
    document.getElementById("firstimage").style.backgroundImage =
        "url('home-overlay-definition.png')";
}

function backgroundImage3() {
    document.body.style.backgroundImage = "url('bg-image-shipping21.jpg')";
    document.getElementById("firstimage").style.backgroundImage =
        "url('free-shipping2.png')";
}

Answer 1

更改

<a href="#"><li onclick="backgroundImage1()"<>⚪</li></a>

分为：

<a href="#"><li onclick="backgroundImage1()">⚪</li></a>

一个简单的拼写错误会破坏您的网站，这应该可行。

Codepen example

如何使用Javascript同时在同一页面中更改两个背景图像？

1 个答案: