如何使用JavaScript更改背景颜色？

141

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

javascript  css 
— 安德斯
source

Answers:

194

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

例如：

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

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

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

— 乔乔先生
source
57

您不需要AJAX，只需一些简单的Java脚本来设置body元素的background-color属性，如下所示：

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

如果要像由服务器启动一样进行操作，则必须轮询服务器，然后相应地更改颜色。

— 西蒙·莱曼
source
2
为了从字面上回答：问题是关于改变背景的颜色，而不是改变整个背景。
— 狼”
18

我同意以前的海报，即通过className更漂亮的方法更改颜色。但是，我的论点是a className可以看作是“为什么要将背景设为这种或那种颜色”的定义。

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

在CSS

body.AnErrorHasOccured
{
  background: #f00;
}

在JavaScript中：

document.body.className = "AnErrorHasOccured";

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

— 马丁·库尔
source
9

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

但是，否则，您可以使用Javascript设置CSS背景。如果您使用的是jQuery之类的框架，它将是这样的：

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

否则，这应该起作用：

document.body.style.background = "#ccc";
— 奥利
source
8

您可以按照以下 步骤1 

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

对于身体变化的背景

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;
        }
— 维格涅什（Vignesh Subramanian）
source
3

我不会真的将其归类为“ AJAX”。无论如何，以下方法可以解决问题：

document.body.style.backgroundColor = 'pink';
— 邓肯·斯玛特
source
3

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秒，以此类推。

— 丹尼斯·帕拉克
source
2

您可以使用以下方法更改页面背景：

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

阅读更多

演示

— 默认
source
2

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

document.body.className = className;
— 红方格
source
2

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

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>
展开摘要

— Ritam Das
source
1

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

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

— 詹姆斯·加里斯
source
1 
<!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>
— 阿尔斯兰
source
2
您的解释在哪里，此外，这与其他答案有何不同？
— j08691
0

但是您需要在<body>元素存在之前配置主体颜色。这样一来，它就具有正确的颜色。

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

您可以将其放在<head>文档的或js文件中。

这是一种不错的颜色。

var myColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
— 加比·德·维尔德
source
0

我建议以下代码：

<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>
— 乔尔·希尔斯
source
0

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

document.querySelector("button").addEventListener("click", function() {
document.body.style.backgroundColor = "red";
});
— 亚历克斯
source
0

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

document.getElementById("yourid").style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ')';

其中a，b，c是颜色值

例：

document.getElementById("yourid").style.backgroundColor = 'rgb(224,224,224)';
— Divakar Rajesh
source
-2

这是使用javascript更改背景的简单编码

<body onLoad="document.bgColor='red'">
— Shahnawaz Alam
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.