java怎么改背景颜色_如何使用JavaScript更改背景颜色？

回答(17)

2 years ago

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

例如：

function changeBackground(color) {

document.body.style.background = color;

}

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

2 years ago

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

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

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

2 years ago

我同意之前的海报，即通过 className 改变颜色是一种更漂亮的方法 . 然而，我的论点是 className 可以被视为"why you want the background to be this or that color."的定义

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

在css

body.AnErrorHasOccured

{

background: #f00;

}

在JavaScript中：

document.body.className = "AnErrorHasOccured";

这使您可以选择根据此 className 设置更多元素 . 因此，通过设置 className ，您可以为页面提供某种状态 .

2 years ago

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

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

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

否则，这应该工作：

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

2 years ago

你可以通过以下方式实现 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

To change an element with ID

document.getElementById("ElementId").style.backgroundImage=imageUrl

document.getElementById("ElementId").style.backgroundColor=BackgroundColor

for elements with same class

var elements = document.getElementsByClassName("ClassName")

for (var i = 0; i < elements.length; i++) {

elements[i].style.background=imageUrl;

}

2 years ago

我不会把它归类为“AJAX” . 无论如何，像下面这样的东西应该做的伎俩：

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

2 years ago

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

2 years ago

您只需使用以下命令即可更改页面背景：

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

})

2 years ago

我更愿意看到在这里使用css类 . 它避免了在javascript中难以阅读颜色/十六进制代码 .

document.body.className = className;

2 years ago

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

function changeBG() {

var selectedBGColor = document.getElementById("bgchoice").value;

document.body.style.backgroundColor = selectedBGColor;

}

Red

Ivory

Pink

2 years ago

将此脚本元素添加到body元素，根据需要更改颜色：

Hello, World!

document.body.style.backgroundColor = "#ff0000"; // red

2 years ago

但您可能希望在

元素存在之前配置正文颜色 . 这样它就有了正确的颜色 .

var myColor = "#AAAAAA";

document.write('\

body{\

background-color: '+myColor+';\

}\

\

');

这可以放入文档的

或js文件中 .

这是一个很好的颜色 .

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

2 years ago

我建议使用以下代码：

Click on this text to change the

background color

function colorize() {

var element = document.getElementById("example");

element.style.backgroundColor='#800';

element.style.color='white';

element.style.textAlign='center';

}

2 years ago

如果你想使用按钮或其他事件，只需在JS中使用它：

document.querySelector("button").addEventListener("click", function() {

document.body.style.backgroundColor = "red";

});

2 years ago

您只需使用以下命令即可更改页面背景：

function changeBodyBg(color){

document.body.style.background = color;

}

2 years ago

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

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

其中a，b，c是颜色值

例：

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

2 years ago

这是使用javascript更改背景的简单编码