Question

我正在尝试这样做，以便当用户点击restyle按钮时，它会将背景更改为存储在我的文件夹中的图像。我有一对，然后你可以选择重置回正常的图像，但由于某种原因我不能让它工作，任何帮助都会很好：

HTML按钮

<a href="#" onclick="changeLook()">ReStyle</a>
<a href="#" onclick="changeBack()">Reset</a>

Javascript

var counter = 0; 
function changeLook(){
    counter += 1;
    switch (counter) {
        case 1:
            document.body.style.backgroundImage = "../Image/BackgroundImage2.jpg";
            break;
        case 2:
            document.body.style.backgroundImage = "../Image/BackgroundImage3.jpg";
            break;
        case 3:
            counter = 0;
            document.body.style.backgroundImage = "../Image/BackgroundImage4.jpg";
            break;
    }
}

function changeBack(){
    document.body.style.backgroundImage = "../Image/BackgroundImage1.jpg";
}

CSS

body {
    padding-top: 23px;
    padding-bottom: 10px;
    background: url('../Image/BackgroundImage1.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 1

只需添加url( 图片路径 )，如：

document.body.style.backgroundImage = "url(../Image/BackgroundImage2.jpg)";

var counter =0; 
function changeLook() {
    counter += 1;

    switch (counter) {
        case 1:
            document.body.style.backgroundImage = "url(http://placehold.it/200x200)";
            break;
        case 2:
            document.body.style.backgroundImage = "url(http://placehold.it/300x300)";
            break;
        case 3:
            counter = 0;
            document.body.style.backgroundImage = "url(http://placehold.it/400x400)";
            break;          
    }
}

function changeBack(){
    document.body.style.backgroundImage = "url(http://placehold.it/200x200)";
}

body {
    padding-top: 23px;
    padding-bottom: 10px;
    background: url('http://placehold.it/200x200') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

<a href="#" onclick="changeLook()">ReStyle</a>
<a href="#" onclick="changeBack()">Reset</a>

Answer 2

您绝对可以使用当前的代码。如果它不起作用，则问题可能是您的background属性的CSS文件中的相对路径不正确。

记住 CSS文件中使用的路径相对于CSS文件本身而不是引用它的位置，这一点非常重要。但是，当您在Javascript代码中使用相对引用时，它将相对于引用Javascript的位置（即您的HTML文档）进行。

您可能需要考虑定义CSS样式来处理这些更改：

body.background1 {
     background: url('../Images/Image1.jpg');
}
body.background2 {
     background: url('../Images/Image2.jpg');
}
/* Continue as necessary */

然后只需使用Javascript更新<body>元素的类：

// Use the counter to determine which style to apply
switch (counter) {
    case 1:
        document.body.className = "background1";
        break;
    case 2:
        document.body.className = "background2";
        break;
    case 3:
        counter = 0;
        document.body.className = "background3";
        break;          
}

示例

你可以see a very basic example of this here并在下面演示：

Answer 3

您可能错误地引用了文件路径。在浏览器中检查开发人员控制台。你看到404错误吗？

此外，您可以使用模数简化changeLook函数：

var counter = 1; 
function changeLook(){
   counter = counter % 4 + 1;
   document.body.style.backgroundImage = "../Image/BackgroundImage" + counter + ".jpg";
}

function changeBack() {
  document.body.style.backgroundImage = "../Image/BackgroundImage1.jpg";
}

用按钮更改背景

3 个答案: