You have the option to utilize CSS for achieving this as well. The code would look something like:

HTML

<input type="radio" name="color" class="red"/> Red
<input type="radio" name="color" class="blue" /> Blue
<div id="container" for>
    Choose a theme:
</div>

CSS

#container {
    width: 100%;
    height: 500px;
    overflow: auto;
}

.red:checked ~ #container { background: red}
.blue:checked ~ #container  { background: blue }

For a live demonstration, visit this link.

Give this a shot:

$(".clickable").on('click', function(){
    $("#box").addClass('new_style_added');
})

You also have the option to go with removeClass() or toggleClass(), depending on your requirements.

Instead of altering the ID of the <div>, it's better to assign a class, especially considering that IDs cannot contain spaces.

HTML (when state changes)

<div id="container" class="custom_class_added">

CSS

#container.custom_class_added{
    background: blue;
}

To include new styles, use the addClass() method:

$('#element').addClass('new_style');

To modify CSS properties, check out the css() function:

$('#element').css('background-color', 'green');

If you were considering adding some flair to it using jQuery, one approach could be:

$('#content').css({
    "background-color": "green",
    "color": "purple"
});

Alternatively, you can assign a class when the user clicks a button:

<label for="green_theme">Green</label>
<input type="checkbox" id="green_theme"/>
<div id="content"></div>

$("#green_theme").click(function() {
    $("#content").attr('class', 'green_theme');
})​

eg.) http://jsfiddle.net/charlescarver/jp8UL/

Furthermore, it’s worth mentioning that setting a cookie might be beneficial if you want the style to persist upon page reload. I recommend checking out jQuery Cookie on GitHub.

Opt for using classes instead of IDs in your code to enhance flexibility and simplicity:

Simplified HTML:

<ul id="changer">
  <li class="blue">Blue color</li>
  <li class="red">Red color</li>
</ul>
<div id="container"></div>

Improved jQuery function:

var $container = $('#container');
$('#changer').on('click', 'li', function(){

  var $this = $(this),
      $color = $this.attr('class');

  $container.removeClass().addClass($color);

});

For changing the background color using jQuery, you can use

$('#container).css({'background-color' : 'blue'});

in your onchange events.
If you want to add a custom class to your tag, then you can use

$('#container).attr('class', 'custom_class_added');

, which will attach the specified class to your tag.

If you are working with form elements like select boxes, you can follow this example:

<select id="mySelectBox">
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

<script type="text/javascript">
    $(document).ready(function(){
        $("#mySelectBox").change(function(){
            $("#theElementYouWant").css({"background-color" : $("#mySelectBox").val()});
        });
    });
</script>

To implement

$('#container).attr('class', 'custom_class_added');

, you can place this code anywhere within your <script></script> tags.

Have you considered implementing something similar to this?

Approach 1:

HTML:

<div id="theme-selector">
    Choose a theme:
    <input type="radio" name="radio-theme" data-color="red" /> Red
    <input type="radio" name="radio-theme" data-color="blue" /> Blue
</div>​

JavaScript/jQuery

$("#theme-selector").find("input[type=radio]").on("change", function(){
    var selectedTheme = $(this).data("color");
    $("#theme-selector").removeAttr("class");
    $("#theme-selector").addClass(selectedTheme);   
});​

Demo: Try Approach 1

Approach 2:

HTML:

<div id="theme-selector">
    Choose a theme:
    <input type="checkbox" name="radio-theme" data-color="red" /> Red
    <input type="checkbox" name="radio-theme" data-color="blue" /> Blue
</div>​

jQuery:

$("#theme-selector").find("input[type=checkbox]").on("change", function(){    
    var selectedTheme = $(this).data("color");    
    if( $(this).is(":checked") ) {        
        $("#theme-selector").removeAttr("class");
        $("#theme-selector").addClass(selectedTheme);         
    } else {
        $("#theme-selector").removeAttr("class"); 
    }  
});​

Demo: Try Approach 2

Here is an example : http://jsfiddle.net/DNQWB/

HTML :

<select class="colorSwitch">
    <option value="green">Green</option>
    <option value="yellow">Yellow</option>
</select>
<div id="contentArea"> <!--CONTENT GOES HERE --> </div>

CSS :

#contentArea{
    background:green;
    height:150px;
    width:80%;
}

.new_color_added{
    background:yellow !important;
}

JS :

$(document).on("change", ".colorSwitch", function(){
    var color = $(this).val();
    if(color=="green"){     
        $("#contentArea").removeClass("new_color_added");
    }else if(color=="yellow"){
        $("#contentArea").addClass("new_color_added");
    }
});

You can now change the background color by selecting a different option from the dropdown menu.

Achieve this with pure JavaScript:

colorSelector.onchange = function() {
    var selectedColor = colors[colorSelector.selectedIndex].value;
        design.style.background = selectedColor;
        design.innerHTML = design.innerHTML;
};

Check out this jsfiddle for reference

Try out this code snippet:

$('#redbttn').click(function(){
    $('#container').removeClass().addClass('red_theme');
});

Make sure to replace the following:

ID of your red button should be #redbttn

Name of your red css class should be red_theme

You can repeat this process for other colors as well.

If you prefer not to add or remove classes and simply want to change the color, you can use this method:

   $('#yourbutton').click(function(){
        $('#container').css('background-color', 'blue');
    });