Change background color using jQuery creates a good impression on the user and makes the web page looks good. In this article, we will discuss changing the background color using multiple events. Like, as Hover, Click and Scroll. There is a traditional way to change the background color using CSS styling but, that is not as effective and eventful as jQuery.
To set the background color by using jQuery, utilize the jQuery css() Property. Now, let’s understand this in detail.
What is css()?
css() is a jquery property that works with the style attribute of the HTML elements. like this <body style="background-color: yellow;">
How css() works?
As described earlier. It works with the style attribute of the HTML element. It triggers the custom attribute setting with the custom style with the JQuery event. So, it sets the style as below:
In HTML format with the inline CSS
<body style="background-color: yellow;"> <h1>Change Background Color using JQuery</h1> </body>
In jQuery, with the css()
$("body").css("background-color","blue");This code will change the background color of the body from yellow to blue.
Now, let’s see changing the background color using css() with multiple events using jQuery.
click() Event:
The click() method will execute the function you passed into it and perform the action described in it when the selected element is clicked.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body style="background-color: yellow;">
<h1>Change Background Color using JQuery</h1>
<button id="btn">Change background</button>
<script>
$("#btn").click(function(){
$("body").css("background-color","blue");
})
</script>
</body>
</html>Scroll() Event:
The scroll method will excute the function on scroll on the body and chnage the body color as we have selected the body element to change its background color to blue on scroll down and when scroll back to the top of the page, it will change the background color to yellow.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body style="background-color: yellow;">
<h1>Change Background Color using JQuery</h1>
...
...
...
...
...
<script>
$(function() {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('body').css('background-color','blue')
} else {
$('body').css('background-color','yellow')
}
});
});
</script>
</body>
</html>Hover() Event:
The Hover method will excute the function on the hover of the HTML element.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<h1>Change Background Color using JQuery</h1>
<button class="hoverBtn" style="background-color: yellow;">Hover</button>
<script>
$('.hoverBtn').hover(
function() {
$(this).css('background-color','blue');
},
function() {
$(this).css('background-color','yellow');
// remember to remove the style after the hover
}
);
</script>
</body>
</html>In this code above the button background color change to the blue on button hover and when you romove your mouse from that button, the background color change back to you yellow. The hover() event is more likely same as the mouseover and mouseenter.
You can get more details about the jQuery Events. Please check this link here.
To get to know more about other JQuery topics, you can check these articles too.
