Question

任何人都知道使用JavaScript交换网页背景颜色的简单方法吗？

Answer 1

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

例如：

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

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

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

Answer 2

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

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

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

Answer 3

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

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

在css中

body.AnErrorHasOccured
{
  background: #f00;
}

在JavaScript中：

document.body.className = "AnErrorHasOccured";

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

Answer 4

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

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

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

否则，这应该有效：

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

Answer 5

您可以通过以下方式完成此操作 第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;
        }

Answer 6

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

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

Answer 7

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

Answer 8

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

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

Answer 9

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

document.body.className = className;

Answer 10

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

＆＃13;

 <category android:name="aroid.intent.category.LAUNCHER" />

＆＃13;

function changeBG() {
  var selectedBGColor = document.getElementById("bgchoice").value;
  document.body.style.backgroundColor = selectedBGColor;
}

＆＃13;

Answer 11

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

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

Answer 12

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

Answer 13

但您希望在<body>元素存在之前配置正文颜色。这样它就有了正确的颜色。

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

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

这是一个很好玩的颜色。

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

Answer 14

我建议使用以下代码：

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

Answer 15

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

admin_notice

Answer 16

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

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

了解更多@ Changing the Background Color

Answer 17

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

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

其中a，b，c是颜色值

示例：

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

Answer 18

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>

Answer 19

或者...您可以在函数draw（）;中执行background（0）;。（0是黑色）

Answer 20

此代码每秒为背景生成随机颜色。

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

希望能帮到人❤

Answer 21

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

Answer 22

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

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

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

22 个答案: