如何动态更改背景色html？

Question

我想更改HTML或正文的背景（渐变）以响应事件。 是否可以使用jQuery更改background-color属性？ 或者（我有CSS类中描述的背景渐变*）是否需要removeClass然后addClass？ 如果是后者，我会有一个两难的困境：我将使用三种不同的颜色。 我是否需要通过removeClass删除其他两种颜色（即使很明显，只有一种会被激活），或者是否有办法以编程方式确定当前正在使用的一种颜色并将其删除呢？ 我认为我可以在ready函数上使用全局var来跟踪它，但是有没有更好/更优雅的方法？

• 这是一个使用http://www.colorzilla.com/gradient-editor/生成的CSS类示例：

   .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

这就是我会做的

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

- - - 细节 - - -

脚步

1. 向元素添加点击事件，以切换不同的颜色
2. 获取新的类名，我假设您将在元素的属性中拥有此名称
3. 从元素中删除每种颜色类别，然后添加新的颜色类别