I have following buttons in my html page:
<button id="button1" onclick="myFunction()" class="buttonClassA"></button>
<button id="button2" onclick="myFunction()" class="buttonClassA"></button>
<button id="button3" onclick="myFunction()" class="buttonClassA"></button>
<button id="button4" onclick="myFunction()" class="buttonClassA"></button>
Following is my css file where I have written buttonClassA
.buttonClassA
{
display: block; width:auto; height:auto; padding:5px; margin-top:10px;
background: #398525; /* old browsers */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;
font:26px times-new-roman;
text-align: center;
text-decoration: none;
color: #147032;
text-shadow: 0px 1px 2px #b4d1ad;
-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}
My Requirement: When I click any button, its background should change.
How should I do it? Should I create another class buttonClassB in which I just change background color and copy all other things from buttonClassA? If this is the approach, then how can I change the class of the button at runtime when button is clicked? Please suggest?
I have following buttons in my html page:
<button id="button1" onclick="myFunction()" class="buttonClassA"></button>
<button id="button2" onclick="myFunction()" class="buttonClassA"></button>
<button id="button3" onclick="myFunction()" class="buttonClassA"></button>
<button id="button4" onclick="myFunction()" class="buttonClassA"></button>
Following is my css file where I have written buttonClassA
.buttonClassA
{
display: block; width:auto; height:auto; padding:5px; margin-top:10px;
background: #398525; /* old browsers */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;
font:26px times-new-roman;
text-align: center;
text-decoration: none;
color: #147032;
text-shadow: 0px 1px 2px #b4d1ad;
-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}
My Requirement: When I click any button, its background should change.
How should I do it? Should I create another class buttonClassB in which I just change background color and copy all other things from buttonClassA? If this is the approach, then how can I change the class of the button at runtime when button is clicked? Please suggest?
Share Improve this question asked Oct 19, 2013 at 7:36 user1556433user155643310 Answers
Reset to default 4You could use another class:
function myFunction () {
$(this).toggleClass('buttonClassB');
};.buttonClassB {
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="myFunction.call(this)">Click me</button>You could also use the style attribute :
function myFunction () {
$(this).css('background', 'red');
// <button style="background:red">
};
Links :
- http://api.jquery.com/toggleClass
- http://api.jquery.com/css
Yes, you can add/remove class using jquery
$(document).ready(function () {
$("#button1,#button2,#button3,#button4").live("click", function () {
$(this).removeClass("buttonClassA");
$(this).addClass("buttonClassB");
});
});
In jQuery you can do this to remove tha actual class and assign another class to your element:
$(document).ready(function(){
$('.buttonClassA').click(function(){
$(this).removeClass('buttonClassA').addClass('buttonClassB');
});
});
inside your css put another class called .buttonClassb
buttonClassB
{
/*your style*/
}
Making another class just for the background can be a good idea. Then you can remove the inline script and use something like this:
$('.buttonClassB').click(function(){
$(this).addClass('buttonClassB');
});
If you want it to go back again on click you could use toggleClass('buttonClassB')
in place of onclick=myFunction() use the following JS code:
onclick="this.className=''; this.style.backgroundColor='gray';
If you dont need much of CSS to define the new style then you can simply modify some of the style attributes(e.g. in this case background-color) you can simply use JS to control that.
How should I do it? Should I create another class buttonClassB in which I just change background color and copy all other things from buttonClassA? If this is the approach, then how can I change the class of the button at runtime when button is clicked? Please suggest?
You do not need to copy everything. You can just add the CSS properties you want to change. The rest will be inherited. So let's say only the background:
.buttonClassB {
background: #398525; /* old browsers */
background: linear-gradient(to bottom, #8DD297, #398525); /* standard */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* old firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
}
I would also suggest to use the unprefixed and standard value in your code – some browsers already have them, as Firefox.
Then, you can simple toggle the class when a button is clicked. Depends if you want remove the class when the same button is clicked again, you have to use addClass or toggleClass:
$(".buttonClassA").on("click", function() {
$(this).toggleClass("buttonClassB");
});
Just replace toggleClass with addClass if you want make the change persistent instead of toggle it.
you could do it this way
Working demo: http://jsfiddle.net/J68sp/
$('button').on('click', function(){
var btn=$(this);
if(btn.attr('class')=='buttonClassA'){
btn.removeClass('buttonClassA').addClass('buttonClassB');
}
else{
btn.removeClass('buttonClassB').addClass('buttonClassA');
}
})
Please check this https://jsfiddle.net/8ors4p2c/
<button id="button1" class="buttonClassA">hello</button>
Its CSS is
.buttonClassA {
background-color: green;
}
.buttonClassA.buttonClassB {
background-color: red;
}
and here is the JS code
jQuery('.buttonClassA').click(function() {
if(jQuery('.buttonClassA').hasClass('buttonClassB')) {
jQuery('.buttonClassA').removeClass('buttonClassB');
} else {
jQuery('.buttonClassA').addClass('buttonClassB');
}
});
//This Is My Jquery or JavaScript Code
$( "button" ).click(function() {
$( this ).toggleClass( "green" );
});/*This Is My CSS Code*/
.orange {
background: Orange;
color: white;
text-align:center;
line-height:50px;
border-radius: 30px;
width: 100px;
height: 50px;
}
.green {
background-color: green;
color: white;
}<! -- This Is My HTML Code -->
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<head>
<body>
<button class="orange">hello</button>
</body><head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.blue {
width: 100px;
height: 50px;
background-color: green;
color: white;
text-align:center;
line-height:50px;``
border-radius: 30px;
}
.red {
background: red;
color: white;
}
</style>
<head>
<body>
<button class="blue">hello</button>
<script>
$( "button" ).click(function() {
$( this ).toggleClass( "red" );
});
</script>
</body>
I suppose you want to change the background for a buttons in a group, so you want to change its background compared with them, try this; (group of four buttons):
<!-- Call function for a button; id="btnButton1" for example -->
<button id="btnButton1" onClick= "chngBG(Event, 'btnButton1')">Button 1</button>
<script
function chngBG(evt, MyButton) {
// Add your code to reset backgrounds to all other buttons
// set a background you want to the targeted button:
document.getElementById(MyButton).style.background = "#fff6a1";
}
</script>