代码之家 › 专栏 › 技术社区 › Anders

如何用javascript更改背景色?

css javascript

114

Anders · 技术社区 · 16 年前

有人知道用javascript交换网页背景色的简单方法吗?

17 回复 | 直到 6 年前

169

Nathan Arthur user2811108 7 年前

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

例如:

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

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

注意:这在一定程度上取决于页面的组合方式,例如,如果使用的是具有不同背景颜色的DIV容器,则需要修改该容器的背景颜色,而不是文档正文。

Simon Lehmann 16 年前

对此,您不需要Ajax,只是一些简单的Java脚本设置了体元素的背景颜色属性,如下所示:

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

如果您希望像是由服务器启动的那样执行此操作,则必须轮询服务器,然后相应地更改颜色。

Nathan Arthur user2811108 7 年前

我同意上一张海报的说法 className 是一种更漂亮的方法。但我的论点是 类名 可以看作是“为什么你希望背景是这个或那个颜色”的定义。

例如,使它变红不仅仅是因为你想要它变红,而是因为你想通知用户一个错误。因此,设置类名 AnErrorHasOccured 在主体上是我的首选实现。

在CSS中

body.AnErrorHasOccured
{
  background: #f00;
}

在JavaScript中:

document.body.className = "AnErrorHasOccured";

这样,您就可以根据此设置更多元素的样式。 类名 . 因此,通过设置 类名 你可以给页面一个特定的状态。

Oli 16 年前

Ajax以异步方式使用JavaScript和XML从服务器获取数据。除非你想从服务器上下载颜色代码,否则这不是你真正想要的!

但是,否则您可以使用javascript设置CSS背景。如果您使用的是像jquery这样的框架,它将是这样的:

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

否则,这将起作用:

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

Vignesh Subramanian 10 年前

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

Duncan Smart 16 年前

我不会把它归类为“Ajax”。无论如何,像下面这样的方法应该可以做到:

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

Ozgur 8 年前

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

defau1t 12 年前

您可以通过以下方法更改页面背景:

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

Zakaria Acharki 9 年前

我更喜欢在这里看到CSS类的使用。它避免了在javascript中难以读取颜色/十六进制代码。

document.body.className = className;

Nathan Arthur user2811108 7 年前

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

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>

james.garriss Pavel 7 年前

将此脚本元素添加到body元素中,根据需要更改颜色:

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

gaby de wilde 11 年前

但您需要在 <body> 元素存在。这样它就有了合适的颜色。

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

这个你可以放在 <head> 文档或JS文件中。

这是一种很好的颜色。

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

Nathan Arthur user2811108 7 年前

我建议使用以下代码:

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

Alex 7 年前

如果要使用按钮或其他事件,只需在JS中使用:

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

jonathan klevin 7 年前

您可以通过以下方法更改页面背景:

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

多读@ Changing the Background Color

Divakar Rajesh 6 年前

或者,如果希望以RGB表示法指定背景颜色值,请尝试

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

其中a、b、c是颜色值

例子:

document.getElementById("yourid").style.backgroundColor = 'rgb(224,224,224)';

-2

Tunaki 9 年前

这是使用javascript更改后台的简单编码

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