如何更改网站背景

How do I change website background

本文关键字：背景 网站 何更改      更新时间：2023-11-15

我做了一个有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的正确方法。

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

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

请尝试：

  • 将alert()放置在IF块内以查看块是否正在执行
  • 查看某个东西是否覆盖在身体上（z索引）

javascript指令是正确的

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

您的错误可能是if条件，请使用控制台检查total是否正常工作或发出警报进行检查：

console.log(total);

或

alert(total);

您有多个问题

  1. 直接使用body属性

    document.body.style.backgroundImage

  2. 你需要引用整个任务，你需要内部报价的图像

    'url("ashishot.jpg")';

工作示例：

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

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

body不是id。此外，设置background-color将不起作用，因为浏览器首先处理background-image。要显示background-color而不是background-image，只需删除图像即可。设置类更加灵活。

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

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

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

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

相关文章：