Question

我做了一个有10个问题的测验，并将你的积分存储在一个名为total的值中。您可以获得的总分数为20，因此在total > 10时，我希望背景变为红色。

我已经在我的网站上使用CSS设置了背景：

<style type="text/css">
    body{
    background-image: url("twins.jpg");
}

然而，我似乎无法让我的条件正常工作。我试过了：

if (total > 10) {
        document.body.style.backgroundColor = "red";
    }

我试过了：

if (total > 10) {
        document.body.style.backgroundColor = "#AA0000";
    }

并且：

if (total > 10) {
        document.getElementById('body').style.backgroundImage = "url(ashishot.jpg)";
    }

但似乎没有任何效果。也许我将if语句放在错误的位置，或者我正在尝试错误地设置背景，我只是想知道这是否是将背景图像从CSS更改为JavaScript的正确方法。

Answer 1

是的，这是使用JS更改背景颜色的正确方法。

document.body.style.backgroundColor = "#AA0000";

请尝试：

将alert()置于IF块内以查看块是否正在执行
查看是否在身体上叠加（z-indexed）某些内容

Answer 2

javascript指令正确

document.body.style.backgroundColor = "red";

您的错误可能是if条件，请检查其工作是否完全正确使用控制台或警报进行检查：

console.log(total);

或

alert(total);

Answer 3

您有多个问题

直接使用body属性
```
document.body.style.backgroundImage 
```
您需要引用整个作业，并且需要图像的内部引号
```
'url("ashishot.jpg")';
```

工作示例：

＆＃13;

function setBackground() {
    document.body.style.backgroundImage = 'url("http://lorempixel.com/300/200/")';
}
setTimeout(setBackground, 2000);

＆＃13;

body {
    background-image: url("http://lorempixel.com/400/200/");
}

＆＃13;

Answer 4

if (total > 10) {
    document.body.style.backgroundImage = "url(ashishot.jpg)";
}

body不是ID。另外，设置background-color将无效，因为浏览器会首先处理background-image。要显示background-color而不是background-image，只需删除图片即可。设置类更灵活。

＆＃13;

document.body.classList.add("total");

＆＃13;

body {
  background-image: url("http://www.studiocity-macau.com/uploads/images/SC/Entertainment/Batman/batman_share.jpg");
}

body.total {
  background-image: none;
  background-color: red;
}

＆＃13;

Answer 5

请注意，您的backgound-image将位于if区块中设置的颜色之上。如果图像完全覆盖背景，您将不会注意到更改background color的效果。

document.body.style.backgroundColor = "#AA0000"和document.body.style.backgroundColor = "red"都有效（尽管"red" == "#FF0000"）。

确保if语句每次total增加时都会运行。

如何更改网站背景

5 个答案: