如何使用JavaScript更改背景颜色？
任何人都知道一个简单的方法来交换使用JavaScript的网页的背景颜色？
修改JavaScript属性document.body.style.background 。
例如：
function changeBackground(color) { document.body.style.background = color; } <BODY onload="changeBackground('red');">
注意：这取决于你的页面放在一起，例如，如果你正在使用不同背景颜色的DIV容器，你需要修改它的背景颜色，而不是文档主体。
你不需要这个AJAX，只是一些纯java脚本设置body元素的background-color属性，就像这样：
document.body.style.backgroundColor = "#AA0000";
如果你想这样做，就好像它是由服务器发起的，你将不得不轮询服务器，然后相应地改变颜色。
我同意以前的海报，通过className改变颜色是一种更漂亮的方法。 然而，我的观点是， className可以被看作是“为什么你想要背景是这个或那个颜色”的定义。
例如，将它变成红色不仅仅是因为你想要红色，而是因为你想告诉用户一个错误。 因此，在AnErrorHasOccured上设置className AnErrorHasOccured将是我的首选实现。
在CSS中
body.AnErrorHasOccured { background: #f00; }
在JavaScript中：
document.body.className = "AnErrorHasOccured";
这给你留下了根据这个className更多元素的选项。 因此，通过设置一个className你可以给页面一个特定的状态。
AJAX以asynchronous方式使用Javascript和XML从服务器获取数据。 除非你想从服务器下载颜色代码，这不是你真正想要的！
但除此之外，你可以用Javascript设置CSS背景。 如果你使用的是像jQuery这样的框架，它将会是这样的：
$('body').css('background', '#ccc');
否则，这应该工作：
document.body.style.background = "#ccc";
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秒等
我不会真正将其归类为“AJAX”。 无论如何，像下面的东西应该做的伎俩：
document.body.style.backgroundColor = 'pink';
你可以用下面的方法来做： 步骤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; }
我宁愿在这里看到使用css类。 它避免了很难阅读JavaScript中的颜色/hex代码。
document.body.className = className;
您可以通过简单地使用以下内容更改页面的背景：
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); })
阅读更多
DEMO
这将根据从下拉菜单中select的用户的select更改背景颜色：
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>
将这个脚本元素添加到你的body元素中：
<body> <script type="text/javascript"> document.body.style.backgroundColor = "#AAAAAA"; </script> </body>
但是，您希望在<body>元素存在之前configuration主体颜色。 这样，它就具有了正确的颜色。
<script> var myColor = "#AAAAAA"; document.write('\ <style>\ body{\ background-color: '+myColor+';\ }\ </style>\ '); </script>
这可以放在文档的<head>或者你的js文件中。
这是一个很好玩的颜色。
var myColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
我会build议下面的代码：
<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>
这是使用javascript更改背景的简单编码
<body onLoad="document.bgColor='red'">
