【问题标题】：How do I change the background color with JavaScript?如何使用 JavaScript 更改背景颜色？
【发布时间】：2010-09-16 21:35:23
【问题描述】：

有人知道使用 JavaScript 交换网页背景颜色的简单方法吗？

【问题讨论】：

标签： javascript css

【解决方案1】：

所以你可以很容易地通过调用类似的函数来完成

 function changeBg()
    {
      document.body.style.color.backgroundColor="#ffffff";

    }

【讨论】：

【解决方案2】：

这里有 2 种使用 Javascript 更改背景颜色的方法

要使用 javascript 更改背景颜色，您可以应用 style.background 或 style.backgroundColor 在要为其更改背景的元素上。

以下示例在您更改正文的背景颜色时使用style.background 属性单击一个元素。

function pink(){ document.body.style.background = "pink"; }
function sky(){ document.body.style.background = "skyblue"; }

<p onclick="pink()" style="padding:10px;background:pink">Pink</p>
<p onclick="sky()" style="padding:10px;background:skyblue">Sky</p>

另一种方法可能是adding a CSS class using javascript 为其附加的元素提供背景。

您可以看到更多使用 javascript 添加类的方法，但在这里您可以只需使用classList.add() 属性。

    function addClass(yourClass){
        document.body.classList.remove("sky", "pink");
        document.body.classList.add(yourClass);
    }

    .pink {
        background: pink;
    }

    .sky {
        background: skyblue;
    }

    <p onclick="addClass('pink')" style="padding:10px;background:pink">Pink</p>
    <p onclick="addClass('sky')" style="padding:10px;background:skyblue">Sky</p>

【讨论】：

【解决方案3】：

 <p id="p1">Hello, Moazzam!</p>
 <p >Hello, Moazzam!</p>
 <p >Hello, Moazzam!</p>
 <script type="text/javascript">
 document.getElementById("p1").style.color= "#ff0000";  // red
 </script>

【讨论】：

这不回答问题。这将改变颜色，而不是背景颜色。

【解决方案4】：

或者，如果您希望以 rgb 表示法指定背景颜色值，请尝试

document.getElementById("yourid").style.backgroundColor = `rgb(${a}, ${b}, ${c})`;

其中 a,b,c 是颜色值

例子：

document.getElementById("yourid").style.backgroundColor = 'rgb(224,224,224)';

【讨论】：

【解决方案5】：

此代码每秒为背景生成随机颜色。

setInterval(changeColor,1000);
function changeColor(){
  let r = Math.random() * 255 ;
  let g = Math.random() * 255 ;
  let b = Math.random() * 255 ;
  
  document.body.style.backgroundColor = `rgb( ${r}, ${g}, ${b} )`;
}

我希望能帮助别人。❤

【讨论】：

【解决方案6】：

<!DOCTYPE html>
<html>
<body>
<select name="" id="select" onClick="hello();">
    <option>Select</option>
    <option style="background-color: #CD5C5C;">#CD5C5C</option>
    <option style="background-color: #F08080;">#F08080</option>
    <option style="background-color: #FA8072;">#FA8072</option>
    <option style="background-color: #E9967A;">#E9967A</option>
    <option style="background-color: #FFA07A;">#FFA07A</option>
</select>
<script>
function hello(){
let d = document.getElementById("select");
let text = d.options[d.selectedIndex].value;
document.body.style.backgroundColor=text;
}
</script>
</body>
</html>

【讨论】：

你的解释在哪里，而且，这与其他答案有什么不同？

【解决方案7】：

修改 JavaScript 属性 document.body.style.background。

例如：

function changeBackground(color) {
   document.body.style.background = color;
}

window.addEventListener("load",function() { changeBackground('red') });

注意：这确实取决于页面的组合方式，例如，如果您使用具有不同背景颜色的 DIV 容器，则需要修改其背景颜色而不是文档正文。

【讨论】：

【解决方案8】：

您可以通过简单地使用来更改页面的背景：

function changeBodyBg(color){
    document.body.style.background = color;
}

阅读更多@Changing the Background Color

【讨论】：

【解决方案9】：

如果您想使用按钮或其他事件，只需在 JS 中使用：

document.querySelector("button").addEventListener("click", function() {
document.body.style.backgroundColor = "red";
});

【讨论】：

【解决方案10】：

将此脚本元素添加到您的正文元素，根据需要更改颜色：

<body>
  <p>Hello, World!</p>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#ff0000";  // red
  </script>
</body>

【讨论】：

【解决方案11】：

我建议以下代码：

<div id="example" onClick="colorize()">Click on this text to change the
background color</div>
<script type='text/javascript'>
function colorize() {
var element = document.getElementById("example");
element.style.backgroundColor='#800';
element.style.color='white';
element.style.textAlign='center';
}
</script>

【讨论】：

【解决方案12】：

这将根据从下拉菜单中选择的用户更改背景颜色：

function changeBG() {
  var selectedBGColor = document.getElementById("bgchoice").value;
  document.body.style.backgroundColor = selectedBGColor;
}

<select id="bgchoice" onchange="changeBG()">
    <option></option>
    <option value="red">Red</option>
    <option value="ivory">Ivory</option>
    <option value="pink">Pink</option>
</select>

【讨论】：

【解决方案13】：

我同意之前的海报，通过className 更改颜色是一种更漂亮的方法。然而，我的论点是className 可以被视为“为什么你希望背景是这种或那种颜色”的定义。

例如，将其设为红色不仅是因为您想要将其设为红色，还因为您希望将错误通知用户。因此，在 body 上设置 className AnErrorHasOccured 将是我的首选实现方式。

在css中

body.AnErrorHasOccured
{
  background: #f00;
}

在 JavaScript 中：

document.body.className = "AnErrorHasOccured";

这使您可以根据className 设置更多元素的样式。因此，通过设置className，您可以为页面赋予某种状态。

【讨论】：

【解决方案14】：

Css 方法：

如果您想看到连续的颜色，请使用以下代码：

body{
    background-color:black;
    animation: image 10s infinite alternate;
    animation:image 10s infinite alternate;
    animation:image 10s infinite alternate;
}

@keyframes image{
    0%{
background-color:blue;
}
25%/{
    background-color:red;
}
50%{
    background-color:green;
}
75%{

    background-color:pink;
}
100%{
    background-color:yellow;
    }
  }

如果您想更快或更慢地看到它，请将 10 秒更改为 5 秒等。

【讨论】：

【解决方案15】：

我希望在这里看到 css 类的使用。它避免了在 javascript 中难以阅读颜色/十六进制代码。

document.body.className = className;

【讨论】：

【解决方案16】：

您可以通过以下方式做到这一点 第一步

   var imageUrl= "URL OF THE IMAGE HERE";
   var BackgroundColor="RED"; // what ever color you want

用于改变BODY的背景

document.body.style.backgroundImage=imageUrl  //changing bg image
document.body.style.backgroundColor=BackgroundColor //changing bg color

使用 ID 更改元素

document.getElementById("ElementId").style.backgroundImage=imageUrl
document.getElementById("ElementId").style.backgroundColor=BackgroundColor

对于具有相同类的元素

   var elements = document.getElementsByClassName("ClassName")
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.background=imageUrl;
        }

【讨论】：

【解决方案17】：

但您可能希望在 <body> 元素存在之前配置主体颜色。这样一来，它就有了正确的颜色。

<script>
    var myColor = "#AAAAAA";
    document.write('\
        <style>\
            body{\
                background-color: '+myColor+';\
            }\
        </style>\
    ');
</script>

这个你可以放在文档的<head>或者你的js文件中。

这是一个很好玩的颜色。

var myColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);

【讨论】：

【解决方案18】：

你可以通过简单的使用来改变页面的背景：

document.body.style.background = #000000; //I used black as color code

然而，下面的脚本会使用 setTimeout() 函数每 3 秒改变一次页面的背景：

$(function() {
            var colors = ["#0099cc","#c0c0c0","#587b2e","#990000","#000000","#1C8200","#987baa","#981890","#AA8971","#1987FC","#99081E"];

            setInterval(function() { 
                var bodybgarrayno = Math.floor(Math.random() * colors.length);
                var selectedcolor = colors[bodybgarrayno];
                $("body").css("background",selectedcolor);
            }, 3000);
        })

READ MORE

DEMO

【讨论】：

你需要在那个号码上加上引号

【解决方案19】：

AJAX 使用 Javascript 和 XML 以异步方式从服务器获取数据。除非您想从服务器下载颜色代码，否则这不是您真正的目标！

但除此之外，您可以使用 Javascript 设置 CSS 背景。如果你使用像 jQuery 这样的框架，它会是这样的：

$('body').css('background', '#ccc');

否则，这应该有效：

document.body.style.background = "#ccc";

【讨论】：

【解决方案20】：

您不需要 AJAX，只需一些普通的 java 脚本设置 body 元素的 background-color 属性，如下所示：

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

如果您想将其视为由服务器启动，则必须轮询服务器，然后相应地更改颜色。

【讨论】：

从字面上回答：问题是关于改变背景的颜色，而不是改变所有的背景。
这对我不起作用，除非我只放“背景”而不是“背景颜色”

【解决方案21】：

我不会把它归类为“AJAX”。无论如何，像下面这样的东西应该可以解决问题：

document.body.style.backgroundColor = 'pink';

【讨论】：