jQuery - re-use CSS value on another element

Question

I have a background colour set on a series of buttons, .button1, .button2., .button3 & .button4. Each of these buttons has a different background colour set in CSS.

I want to use jQuery to detect the background colour of the button when it is clicked and apply that colour to .toolbar.

Is this possible?

Sarfraz · Accepted Answer · 2010-03-29 08:31:16Z

4

You could do:

$('button[class^="button"]').click(function(){
  $('.toolbar').css('background-color', $(this).css('background-color'));
});

This is generic and will automatically detect clicked button rather than writing code for each button having different classes. Also, this code makes sure that it does the stuff only for those buttons whose class names start with button.

answered Mar 29, 2010 at 8:31

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andy E · Accepted Answer · 2010-03-29 08:32:28Z

0

$('button').click(function()
{
    $('.toolbar').css('background-color', $(this).css('background-color'));
});

edited Mar 29, 2010 at 8:32

Andy E

346k86 gold badges482 silver badges452 bronze badges

answered Mar 29, 2010 at 8:29

Amy B

18k12 gold badges66 silver badges83 bronze badges

2 Comments

Sarfraz Over a year ago

That will apply to all and any button on the form because you have used merely button selector which is not specific, might create problems if there are more buttons on the form from which he may not want to apply the background.

Amy B Over a year ago

I know it will. The questioner didn't provide good enough information for a good selector though.

Collectives™ on Stack Overflow

jQuery - re-use CSS value on another element

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related