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

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

747233 次浏览
小开
最佳答案

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

例如:

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


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

注意: 这在一定程度上取决于您的页面是如何组合在一起的，例如，如果您使用一个背景颜色不同的 DIV 容器，您需要修改该容器的背景颜色，而不是文档正文。

小开

我不会真的把它归类为“ AJAX”。不管怎样，下面这样的东西应该可以解决问题:

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

你不需要 AJAX，只需要一些普通的 java 脚本来设置 body 元素的背景颜色属性，如下所示:

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

如果您希望这样做，就像它是由服务器启动的一样，那么您必须轮询服务器，然后相应地更改颜色。

小开

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

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

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

否则，这应该会奏效:

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

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

document.body.className = className;
小开

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

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

在 CSS 里

body.AnErrorHasOccured
{
background: #f00;
}

在 JavaScript 中:

document.body.className = "AnErrorHasOccured";

这样，您就可以根据这个 className设计更多元素的样式。因此，通过设置 className，你可以给页面一种特定的状态。

小开

将这个 script 元素添加到 body 元素，根据需要改变颜色:

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

小开

你可以简单地使用以下方法更改页面的背景:

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 < br/> < br/> < a href = “ http://jsfiddle.net/refhat/gJWFR/1/”rel = “ nofollow”> < strong > DEMO

小开

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

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

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

这个颜色很好玩。

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

我建议采用以下代码:

<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>
小开

你可以用下面的方法来做 步骤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;
}
小开

社区参与服务:

如果你想看到连续的颜色，使用以下代码:

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

小开

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

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>

小开

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

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

你可以简单地使用以下方法更改页面的背景:

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

阅读更多@更改背景颜色

小开

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

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

其中 a，b，c 是颜色值

例如:

document.getElementById("yourid").style.backgroundColor = 'rgb(224,224,224)';
小开 
<!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>
小开

这里有两种使用 Javascript 改变背景颜色的方法

  1. 用 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>

  1. 另一种方法是使用 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>

小开

此代码每秒钟为背景制作随机颜色。

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

我希望能帮助到某人。弃

小开 
 <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>
小开

所以你可以很容易地通过调用

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


}
小开

它可以通过使用

document.body.style.color.backgroundColor="#000000";

提交答案