Question

我想点击一下按钮，点击后，我网页的背景颜色会发生变化。我已经尝试过使用Javascript＆amp; 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>

正如您所看到的，当用户点击按钮时，它应该将类更改为＆＃34; bgcolor2＆＃34;所以背景颜色是灰色的，但它只是将按钮的背景颜色改为灰色＆amp;不是文件！那么如何用css或js改变文档的背景颜色或者这段代码的问题是什么？ thx ......

Answer 1

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

this指的是按钮，而不是身体。 document.body.className = 'bgcolor2';

Answer 2

只需定位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>

Answer 3

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

Answer 4

尝试这样的事情：

<强> HTML

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

<强>的Javascript

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

<强> CSS

.bgcolor{
    background:red;
}

DEMO

如何制作一个可以改变doucment背景颜色的按钮？

4 个答案: