如何更改网站背景

Question

I've made a quiz which has 10 questions, and stores your points in a value called total . The total points you are able to get is 20, so when total > 10 , I want the background to turn red .

I have already set a background using CSS on my website here:

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

However I can't seem to get my condition to work properly. I've tried:

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

I've tried:

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

And:

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

But nothing seems to work. Maybe I'm placing my if statement in the wrong place, or maybe I'm trying to set the background incorrectly, I just want to know if this is the correct way to change a background image from CSS into JavaScript.

Answer 1

Yes this is the correct way to change background color using JS.

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

Please try:

• Placing alert() inside the IF block to see if block is executing
• See if something is overlayed(z-indexed) on body

Answer 2

The javascript instruction is correct

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

Your error may be the if condition, check if total its work properly usign the console or an alert to check it:

console.log(total);

or

alert(total);

Answer 3

You have more than one issue

1. Use directly the body property

    document.body.style.backgroundImage 

2. You need to quote the whole assignment and you need inner quotes for the image

    'url("ashishot.jpg")'; 

Working example:

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

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

Answer 4

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

body is not an id. also, setting background-color will not work because browser treat background-image first. To display background-color instead of background-image , simply delete the image. Setting classes is more flexible.

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

 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; } 

Answer 5

Be aware that your backgound-image will be on top of the color you are setting in the if block. If the image covers the background entirely you will not notice the effect of changing the background color .

Both document.body.style.backgroundColor = "#AA0000" and document.body.style.backgroundColor = "red" are valid (although "red" == "#FF0000" ).

Make sure the if statement runs every time total increases.