Geek asks and answers

JQuery - changing the background color of a page when a button is clicked

I am very new to jquery and trying to change the background color of a page after clicking a button.

I have searched and there are several questions on similar things, but I am looking for an answer to changing the background color of a page.

I would appreciate any help, thanks, 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');
)};
+3
source share
3 answers
$( "#change_background" ).on( "click", function() {
  $("body").css("background-color","#000000");
});

Here you have an example.

+2
source

It:

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

For this:

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

//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:// .

0

More articles:


All Articles