Friday, February 23, 2024
 Popular · Latest · Hot · Upcoming
115
rated 0 times [  117] [ 2]  / answers: 1 / hits: 32208  / 11 Years ago, sat, october 19, 2013, 12:00:00

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?


More From » jquery

 Answers
10

You 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 :




[#74878] Friday, October 18, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
tatianah

Total Points: 185
Total Questions: 99
Total Answers: 87

Location: Sao Tome and Principe
Member since Wed, Dec 21, 2022
1 Year ago
;