如何制作一个可以更改文档背景颜色的按钮？答案

【问题标题】：How to make a button that can change background color of a doucment?如何制作一个可以更改文档背景颜色的按钮？
【发布时间】：2015-10-24 09:50:12
【问题描述】：

我想制作一个按钮，当它被点击时，我的网页的背景颜色会发生变化。我已经尝试过使用 Javascript 和 Css 但没有成功！这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>
            Test
        </title>
        <style>
        .bgcolor1{
            background-color:black;
        }
        .bgcolor2{
            background-color:grey;
        }
        </style>
        <script type="text/javascript">

        </script>
    </head>
    <body class="bgcolor1">
        <button onclick="this.className = 'bgcolor2'">Change COLOUR</button>
    </body>
</html>

正如您所看到的，当用户单击按钮时，它应该将类更改为“bgcolor2”，因此背景颜色将为灰色，但它只是将按钮的背景颜色更改为灰色而不是文档！那么如何使用 css 或 js 更改文档的背景颜色，或者这段代码有什么问题？谢谢...

【问题讨论】：

document.body.className = 'bgcolor2'

标签： javascript html css

【解决方案1】：

<button onclick="document.body.className = 'bgcolor2'">Change COLOUR</button>

this 指的是按钮而不是正文。 document.body.className = 'bgcolor2';

【讨论】：

【解决方案2】：

使用document.body 代替this

<!DOCTYPE html>
<html>
    <head>
        <title>
            Test
        </title>
        <style>
        .bgcolor1{
            background-color:black;
        }
        .bgcolor2{
            background-color:grey;
        }
        </style>
        <script type="text/javascript">

        </script>
    </head>
    <body class="bgcolor1">
        <button onclick="document.body.className = 'bgcolor2'">Change COLOUR</button>
    </body>
</html>

【讨论】：

【解决方案3】：

试试这样的：

HTML

<button onclick="myFunction()">Click me</button>

Javascript

function myFunction(){
    document.body.className = 'bgcolor';
}

CSS

.bgcolor{
    background:red;
}

DEMO

【讨论】：

【解决方案4】：

只定位document.body.className而不是this；在这种情况下，this 是对按钮本身的引用。使您的onclick 属性如下

onclick="document.body.className='myCustomBGColor'"

myCustomBGColor 是一个 CSS 类。

这是你最后的工作小提琴

        .bgcolor1{
            background-color:black;
        }
        .bgcolor2{
            background-color:grey;
        }

<body class="bgcolor1">
        <button onclick="document.body.className = 'bgcolor2'">Change COLOUR</button>
</body>

【讨论】：