Question

Let’s say we have defined a CSS class that is being applied to various elements on a page.

colourful {     color: #DD00DD;     background-color: #330033; } 

People have complained about the colour, that they don’t like pink/purple. So you want to give them the ability to change the style as they wish, and they can pick their favourite colours. You have a little colour-picker widget that invokes a Javascript function:

function changeColourful(colorRGB, backgroundColorRGB) {     // answer goes here } 

What goes in the body of that function?

The intent being that when the user picks a new colour on the colour-picker all the elements with class='colourful' will have their style changed.

Answer 1

I don’t know about manipulating the class directly, but you can effectively do the same thing. Here’s an example in jQuery.

$('.colourful').css('background-color', 'purple').css('color','red'); 

In plain javascript, you would have to do more work.