×

Please Login or Register to continue.

4
(3.3K Views)

Hello Team! 

I am working on a project. I am using the jquery library to create my project. I have a button in my code. I want to change the button color after clicking on the same button. for example - If I have an HTML button and the button color is blue. If I click the button, the button color should be red. Is it possible to change the color of a button by clicking the same button? 

HTML button with CSS - 

<!DOCTYPE html>
<html>
<head>
	<title>Page title </title>
	<style type="text/css">
		.my_btn{
			background: blue;
			color: white;
		}
	</style>
</head>
<body>
	<button class="my_btn">My Button</button>
</body>
</html>

In the above code, I created a button and gave color and background color using CSS. As you can see, I gave blue color for the button text color and button background color. I want to change the background color on the button click. How can I change the button color by clicking ? 

form html javascript jquery js
(2.4K Points)
in jquery
Answer
Share

2 Answers
(3.4K Points)
2

You can easily change color using the jQuery library with addClass() method. the addClass() method or function is used to change or add a new class to the button. This is one of the finest method on jquery to change the CSS class of div blocks, span, buttons, forms fields, etc. 

If you want to change the color of the HTML button by clicking on the same or different button then you should create onClick event on any button.Create a function and add a new class by jQuery addClass() method . You have to create a new CSS class before adding a new class using the jQuery addClass() function. 

<!DOCTYPE html>
<html>
<head>
	<title>Page title </title>
	<style type="text/css">
		.my_btn{
			background: blue;
			color: white;
			cursor: pointer;
		}
		.my_btn2{
			background: red;
			color: yellow;
		}
	</style>
	<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
	<script type="text/javascript">
	     function changeColor()
	     {
        $("#my_btn").addClass('my_btn2');
	     }
	</script>
</head>
<body>
	<button type="button" class="my_btn" onClick="changeColor();" id="my_btn">My Button</button>
</body>
</html>

In the above code, you can see, I have created another my_btn2 class and added this class on button click using a JavaScript function. 

Execute the above code and click on the My button and you will see the effect. 


Comment
(9.4K Points)
2

Changing the color of a button or div is much easier using css() method in jQuery.You can add extra CSS attributes and properties using jQuery css method. 

How to change the color of a button or div using the jQuery library?

To change the color of a div or button, you have to use the ready function of jquery. 

like this - 

 $(document).ready(function() {
             $( "#my_btn" ).click(function() {

});
  });

Use the jQuery CSS method to change the color of a div or button like this - 

$("#my_btn").css({'color': '#6600FF', 'background-color' : '#CC3333'});

or 

$("#my_divid").css({'color': '#6600FF', 'background-color' : '#CC3333'});

Let's create an example - 

<!DOCTYPE html>
<html>
<head>
	<title>Page title </title>
	<style type="text/css">
		.my_btn{
			background: blue;
			color: white;
		}
	</style>
	<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
	<script type="text/javascript">
	     $(document).ready(function() {
	     	$( "#my_btn" ).click(function() {
    $("#my_btn").css({'color': '#6600FF', 'background-color' : '#CC3333'});
});
  });

	</script>
</head>
<body>
	<button type="button" class="my_btn" id="my_btn">My Button</button>
</body>
</html>

As you can see in the above code, I used jQuery css() method to add extra CSS on the button click. 

In this way, you can change button or div color using jQuery . 


Comment

Related Questions :-

Your Answer

You can post your answer after login..