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

I wanna change the background color of the page using the user input. here's my code so far..

我想使用用户输入更改页面的背景颜色。到目前为止这是我的代码..

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type = "text/javascript">
function paintIt(){
    color = prompt("Enter the color you want on the Background???");
    switch (color){
    }
}
</script>
<form>
<input type = "button" value = "Paint Me" onclick ="paintIt()">
</form>
</body>
</html>

and my just simple css

而我的简单css

   html {font-family:Arial, Helvetica, sans-serif; colour:#fff;}
            body{background-color:#ccc; margin:0;}

Thanks

谢谢

5 个解决方案

#1

function paintIt()
{
    color = prompt("Enter the color you want on the Background???");
    document.body.style.backgroundColor = color;
}

http://jsfiddle.net/5H8ux/

try something like #000000 or #fff.

尝试＃000000或#fff之类的东西。

#2

Try this:

尝试这个：

function paintIt(){
   document.body.style.backgroundColor = "red";
}

#3

Try with this

试试这个

function paintIt(){ 
    color = prompt("Enter the color you want on the Background???"); 
    document.body.style.backgroundColor = color;
}

Js Fiddle Demo

Js Fiddle演示

You can try this RGB Color Parser for validating the color names in different format whether they are valid color or not. Here is a demo.

您可以尝试使用此RGB颜色分析器来验证不同格式的颜色名称，无论它们是否为有效颜色。这是一个演示。

#4

A simple example that expects the user to enter a valid background color:

一个简单的例子，希望用户输入有效的背景颜色：

<button id="my-button">Change background</button>
<script>
    document.getElementById("my-button").addEventListener("click", function() {
        document.body.style.backgroundColor = prompt("What color");
    });
</script>

JSFiddle: http://jsfiddle.net/XLL3n/1/

JSFiddle：http：//jsfiddle.net/XLL3n/1/

And I have no rep. so I can't comment, but you should really consider reading about css colors to understand possible valid inputs. The library pointed out by @Sachin looks nice.

我没有代表。所以我不能发表评论，但你应该考虑阅读有关css颜色的内容，以了解可能的有效输入。 @Sachin指出的图书馆看起来不错。

#5

<script type = "text/javascript">
function paintIt(){
    color = prompt("Enter the color you want on the Background???");
    switch (color){
        case "red":
            document.body.style.background = color;
        break;
        case "white":
            document.body.style.background = color;
        break;
        default: alert("not a valid color");
   }
}
</script>

#1

function paintIt()
{
    color = prompt("Enter the color you want on the Background???");
    document.body.style.backgroundColor = color;
}