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

153

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

例如：

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

<BODY onload="changeBackground('red');">

注：这不，如果您使用的是DIV容器不同的背景颜色，你将需要修改取决于你的页面是如何放在一起，例如位背景颜色，而不是文档主体。

来源

2008-10-13 14:27:01

3

我不会真的将其归类为“AJAX”。无论如何，像下面应该做的伎俩：

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

来源

2008-10-13 14:27:50

38

你不需要AJAX对于这一点，只是一些普通的Java脚本设置body元素的background-color属性，像这样：

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

如果你想像做它是由服务器发起的那样，你必须轮询服务器，然后相应地改变颜色。

来源

2008-10-13 14:27:56

+1

对于直接回答：问题是关于更改背景的颜色，而不是所有的背景。 – Wolf 2015-07-23 11:31:55

9

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

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

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

否则，这应该工作：

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

来源

2008-10-13 14:30:23 Oli

2

我宁愿看到这里使用一个CSS类的。它避免了很难阅读javascript中的颜色/十六进制代码。

document.body.className = className;

来源

2008-10-13 14:48:57 redsquare

18

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

例如，使它变成红色不仅仅是因为你想让它变红，而是因为你想告诉用户一个错误。因此，在身体上设置className AnErrorHasOccured将是我的首选实现。

在CSS

body.AnErrorHasOccured 
{ 
    background: #f00; 
}

在JavaScript：

document.body.className = "AnErrorHasOccured";

这让你根据这个className造型多种元素的选项。因此，通过设置className，您可以给页面一定的状态。

来源

2008-10-13 15:03:17

1

根据需要这个脚本元素添加到你的身体元素，改变颜色：

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

来源

2011-02-01 17:41:54

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

READ MORE

DEMO

来源

2012-11-02 11:27:23 defau1t

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

来源

2013-10-02 19:27:02

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>

来源

2015-01-22 07:14:07

3

你可以做到这一点在以下几个方面 STEP 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; 
     }

来源

2015-02-26 05:10:11

-2

这是使用javascript

<body onLoad="document.bgColor='red'">

来源

2016-06-13 08:12:32

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

来源

2016-09-04 09:16:28

1

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

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>

来源

2017-03-25 11:39:22

0

如果你想使用一个按钮或其他一些事件

，只是在JS中使用它：

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

来源

2018-02-22 11:14:57 Alex

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

回答

相关问题