堆栈内存溢出
  繁体   English   中英

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

[英]How do I change the background color with JavaScript?

 原文  2008-10-13 14:23:39  5   22    javascript/ css

问题描述

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

22 个解决方案

解决方案1
 224 已采纳  

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

例如：

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

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

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

解决方案2
 69  2008-10-13 14:27:56

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

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

如果您想将其视为由服务器启动，则必须轮询服务器，然后相应地更改颜色。

解决方案3
 21  2008-10-13 15:03:17

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

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

在 CSS 中

body.AnErrorHasOccured
{
  background: #f00;
}

在 JavaScript 中：

document.body.className = "AnErrorHasOccured";

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

解决方案4
 12  2008-10-13 14:30:23

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

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

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

否则，这应该工作：

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

解决方案5
 11  2015-02-26 05:10:11

您可以通过以下方式进行步骤 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;
        }

解决方案6
 4  2012-11-02 11:27:23

您可以通过简单地使用来更改页面的背景：

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

阅读更多

演示

解决方案7
 4  2008-10-13 14:27:50

我不会真的把它归类为“AJAX”。 无论如何，像下面这样的东西应该可以解决问题：

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

解决方案8
 4  2016-09-04 09:16:28

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

解决方案9
 3  2008-10-13 14:48:57

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

document.body.className = className;

解决方案10
 3  2017-03-25 11:39:22

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

 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>

解决方案11
 3  2018-02-22 11:14:57

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

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

解决方案12
 3  2018-11-12 05:13:38

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

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

其中 a,b,c 是颜色值

例子：

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

解决方案13
 3  2020-04-01 15:10:51

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

解决方案14
 2  2011-02-01 17:41:54

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

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

解决方案15
 2  2021-09-29 06:55:42

所以你可以很容易地通过调用一个函数来完成

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

    }

解决方案16
 1  2015-01-22 07:14:07

我建议使用以下代码：

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

解决方案17
 1  2018-03-28 05:11:38

您可以通过简单地使用来更改页面的背景：

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

阅读更多@ 更改背景颜色

解决方案18
 1  2020-08-16 09:49:07

这是使用 Javascript 更改背景颜色的 2 种方法

  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 添加一个 CSS 类，为它附加的元素提供背景。

    您可以看到更多使用 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>

解决方案19
 0  2013-10-02 19:27:02

但是您可能希望在<body>元素存在之前配置主体颜色。 这样，它从一开始就具有正确的颜色。

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

这可以放在文档的<head>或 js 文件中。

这是一个很好的颜色。

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

解决方案20
 0  2020-12-15 01:37:02

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

解决方案21
 0  2022-06-23 08:27:57

可以使用

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

解决方案22
 -2  2016-06-13 08:12:32

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

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

解决方案23
 -2  2021-02-12 14:55:33

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

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

我希望能帮助别人。❤

解决方案24
 -3  2021-05-03 18:41:51

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何更改 JavaScript 中的背景颜色？ 如何使用 JavaScript 更改元素的背景颜色 如何使用 JavaScript 更改每个列表项的背景颜色？ Javascript如何比较两个值，然后更改背景颜色？ 如何使用Javascript功能更改div的背景颜色 如何使用javascript更改背景颜色？ 如何使用 javascript 更改 HTML 表格单元格的背景颜色？ 如何使用JavaScript更改背景颜色 如何更改mouseMoved的背景颜色？ 如何更改此代码的背景颜色
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM