如何動態更改背景色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. 從元素中刪除每種顏色類別，然后添加新的顏色類別