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

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

javascript html css

Javascript 如何制作一个可以改变背景颜色的按钮？,javascript,html,css,Javascript,Html,Css,我想做一个按钮，当它被点击时，我的网页背景颜色的变化。我已经尝试过Javascript和Css，但没有成功！这是我的密码： <!DOCTYPE html> <html> <head> <title> Test </title> <style> .bgcolor1{ background-color:blac

我想做一个按钮，当它被点击时，我的网页背景颜色的变化。我已经尝试过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>


试验
.bgcolor1{
背景色：黑色；
}
.bgcolor2{
背景颜色：灰色；
}
变色

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

更改颜色
<button onclick="document.body.className = 'bgcolor2'">Change COLOUR</button>

此

指的是按钮，而不是主体<代码>document.body.className='bgcolor2'

只需将

document.body.className

作为目标，而不是

此

；在此场景中，

此

是对按钮本身的引用。将

onclick

属性设置为如下所示

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

其中

myCustomBGColor

是一个CSS类

这是你最后一把小提琴

.bgcolor1{
背景色：黑色；
}
.bgcolor2{
背景颜色：灰色；
}


变色

使用

文档.正文

而不是

此


试验
.bgcolor1{
背景色：黑色；
}
.bgcolor2{
背景颜色：灰色；
}
变色

尝试以下方法：

HTML

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

CSS

.bgcolor{
    background:red;
}

document.body.className='bgcolor2'

.bgcolor{
    background:red;
}