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

Question

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

Answer 1

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

例如:

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

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

注意:这确实取决于您的页面如何组合在一起,例如,如果您使用具有不同背景颜色的DIV容器,则需要修改其背景颜色而不是文档正文.

Answer 2

你不需要AJAX,只需要设置body元素的background-color属性的普通java脚本,如下所示:

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

如果您想要像服务器一样启动它,则必须轮询服务器,然后相应地更改颜色.

Answer 3

我同意之前的海报,即改变颜色className是一种更漂亮的方法.然而,我的论点是,a className可以被视为"为什么你希望背景成为这种或那种颜色"的定义.

例如,将其设为红色不仅仅是因为您希望它变红,而是因为您想要通知用户错误.因此,AnErrorHasOccured在body上设置className 将是我首选的实现.

在css

body.AnErrorHasOccured
{
  background: #f00;
}

在JavaScript中:

document.body.className = "AnErrorHasOccured";

这使您可以根据此选择更多元素className.因此,通过设置className一种给予页面某种状态的方式.

Answer 4

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

但是否则你可以用Javascript设置CSS背景.如果您使用的是像jQuery这样的框架,它将是这样的:

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

否则,这应该工作:

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

Answer 5

您可以通过以下方式执行 步骤1

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

Answer 6

我不会真正将其归类为“AJAX”。不管怎样，像下面这样的东西应该可以解决问题：

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

Answer 7

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 秒等。