logo标签列表

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

jquerycssonclickbackground-color
5

我很新于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');
)};
将$(button)改为$('#btn')，并将整个代码块包装在$(document).ready(function() { });中，这样就可以了！ - zgood
3个回答
4
$( "#change_background" ).on( "click", function() {
  $("body").css("background-color","#000000");
});

Here you have an example.

1

这个：

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

To this:

$(document).ready(function(){
    $('#btn').click(function() {
        $('body').css('background', '#ff0000');
    )};
});
谢谢大家的帮助，但还是不行。我在HTML文档中正确初始化了库吗？ - Freddie
在控制台检查页面时，我遇到了错误。不知道我是否使用了正确的jQuery库？ - Freddie
最终搞定了，谢谢大家的帮助！非常感激！！ - Freddie
0

如果您正在本地测试网站，请将//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://）。

谢谢，我错过了那个！我已经更新了，但是背景颜色还是改变不了？ - Freddie
哦，他犯了一个小错误。请将第一个）};替换为});。 - Daniel Peukert
明白了！我之前一直在使用zgood的代码，但现在已经根据最新更改进行了调整！ - Freddie
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接