How can I dynamically change the background-color html?

Question

I want to change the background (gradient) of either the html or body in response to an event. Is it possible to change the background-color attribute using jQuery? Or (I have the background gradients described in CSS classes*) do I need to removeClass then addClass? If the latter, I have a slight dilemma: I am going to use three different colors. Do I need to remove both of the other colors via removeClass (even though, obviously, only one will be active), or is there a way to programmatically determine which one is currently in use and just remove that? I reckon I could use a global var atop the ready function to keep track of that, but is there a better/more elegant way?

• Here's an example CSS class, generated using http://www.colorzilla.com/gradient-editor/:

  .silverBackground {
      background: #e2e2e2; /* Old browsers */
      background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
      background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
  }
  

Answer 1

This is how i would do it

$('someElement').click(function(){ // 1
   var newClass = $(this).attr('toggleColor'); // 2
   $(document.body).removeClass('color1 color2 color3').addClass(newClass); // 3
});

----- Details ------

steps

1. Add a click event to the element that will toggle a different color
2. Get the new class name i am assuming that you will have this in a attribute on the element
3. Remove every color class from the element then add the new one