Menu
I'm very new to jquery and am trying to change the page background colour once a button is clicked.
I have searched and there are a quite a few questions on similar things, but I'm looking for an answer on a page background colour change specifically.
I'd 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');
)};
850
Projects In JavaScript & JQuery To change the background color using jQuery, use the jQuery css() property. We will change background color on mouse hover with the jQuery on() and css() method.
Use HTML DOM Style backgroundColor Property to change the background color after clicking the button. This property is used to set the background-color of an element. Example: This example changes the background color with the help of JavaScript. after clicking the button ?
To add the background color, we use css() method. The css() method in JQuery is used to change style property of the selected element. The css() in JQuery can be used in different ways. The css() method can be used to check the present value of the property for the selected element.
To change the background color of the button, use the CSS background-color property and give it a value of a color of your taste. In the .button selector, you use background-color:#0a0a23; to change the background color of the button.
$( "#change_background" ).on( "click", function() {
$("body").css("background-color","#000000");
});
Here you have an example.
109
This:
$(button).click(function() {
$(this).css('background', '#ff0000');
)};
To this:
$(document).ready(function(){
$('#btn').click(function() {
$('body').css('background', '#ff0000');
)};
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
