jquery - 如何动态更改背景颜色 html？

Question

我想更改 html 或正文的背景(渐变)以响应事件。是否可以使用 jQuery 更改背景颜色属性？或者(我有 CSS 类中描述的背景渐变*)我需要先删除类然后添加类吗？如果是后者，我有点进退两难:我要使用三种不同的颜色。我是否需要通过 removeClass 删除其他两种颜色(尽管显然只有一种颜色处于事件状态)，或者是否有一种方法可以通过编程方式确定当前正在使用的颜色并删除它？我想我可以在 ready 函数上使用全局变量来跟踪它，但是有更好/更优雅的方法吗？

• 这是一个示例 CSS 类，使用 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

这就是我的做法

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

----- 详情 ------

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