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?

Answer 1

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

Answer 2

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.