JQuery - 单击按钮时更改页面背景颜色

Fre*_*die 5 css jquery onclick background-color

我对 jquery 很陌生,我试图在单击按钮后更改页面背景颜色。

我已经搜索过很多类似的问题,但我正在寻找有关页面背景颜色更改的具体答案。

我很感激任何帮助,谢谢,弗雷迪

HTML:

<!DOCTYPE HTML>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

<body>
    <section class="text">
        CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
    </section>

    <button id="btn">CLICK ME!</button>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

CSS:

body {
    height: ;
    background: #D8D8D8;
}

.text {
    color: #686868; 
    font-family: arial;
    font-size: 2em;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

#btn {
    margin-left: 550px;
    width: 200px;
    height: 100px;
    font-size: 2em;
    border-radius: 10px;
    background: #ffffff;
}

#btn:hover {
    background: #ff0000;
    color: #ffffff;
}
Run Code Online (Sandbox Code Playgroud)

JS:

$(button).click(function() {
    $(this).css('background', '#ff0000');
)};
Run Code Online (Sandbox Code Playgroud)

mbe*_*res 4

$( "#change_background" ).on( "click", function() {
  $("body").css("background-color","#000000");
});
Run Code Online (Sandbox Code Playgroud)

这里有一个例子。