Question

我对jquery很新，并且在点击按钮后尝试更改页面背景颜色。

我已经搜索过，并且在类似的事情上有很多问题，但我正在寻找特定页面背景颜色变化的答案。

感谢任何帮助，谢谢Freddie

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>

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;
}

JS：

$(button).click(function() {
    $(this).css('background', '#ff0000');
)};

Answer 1

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

Here你有一个例子。

Answer 2

此：

$(button).click(function() {
    $(this).css('background', '#ff0000');
)};

对此：

$(document).ready(function(){
    $('#btn').click(function() {
        $('body').css('background', '#ff0000');
    )};
});

Answer 3

如果您在本地测试网站，请尝试将//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js更改为http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js。

如果你使用//，它会使用你正在访问页面的协议（file://以防本地testng）。

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

3 个答案: