Question

在下面的代码中，我有一个javascript函数，我想将页面的backgroundColor更改为作为参数传入的颜色。但是我的代码不起作用，任何人都可以帮我解决我的代码中的错误吗？

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Changing Color</title>
<head>
    <style type="text/css">
        body {
            background-color:#ffcccc;
        }
    </style>
</head>
<body>
    <form>
        <label>color: <input type="text" name="color"> </label>
        <input name="color" type = "button" onClick = "changecolor(color.value) " value = "color">
    </form>
</body>
</html>

使用Javascript：

function changecolor(colour)
{
    document.bgcolor=colour;
}

Answer 1

假设colour包含有效的CSS颜色描述符，您可以写：

document.body.style.backgroundColor = colour;

Answer 2

您必须将该功能放在脚本块中。

...

</form>
<script type="text/javascript>
  //function declaration 
</script>

Answer 3

试试这个代码，它很好地工作。我刚试过它。你可以在任何你想要的地方使用它。还要附加onmouse click和onmouseover的代码。

<html>
    <head>
    <script language="javaScript">
    function change_background(color){
    document.bgColor = color;
    }
    </script>
    </head>
    <body>
    <form> 
    <label>color: <input type="text" name="color" > 
    </label>
    <input name="clrs" type ="button" value="getcolor" onClick = "change_background(color.value) " > 
    </form>
    <a href="#" onClick="change_background('#099')">ClickBlue</a>
    <a href="#" onMouseOver="change_background('#111')">Mouseoverblack</a>
    <a href="#" onMouseOver="change_background('#fff')">Mouseover white</a>
    </body>
    </html>`

通过javascript函数改变颜色

3 个答案: