jQuery：临时更改样式然后重置为原始类答案

【问题标题】：jQuery: Temporarily change a style then reset to original classjQuery：临时更改样式然后重置为原始类
【发布时间】：2010-11-06 09:47:20
【问题描述】：

假设我有一个名为 testThing 的类：

.testThing
{
   background-color:#000000;
   float:left;
   height:50px;
   width:50px;
}

并且我希望能够在单击按钮时测试对该类的任何控件的背景颜色更改：

function setColor(someColor) 
{
   jQuery('.testThing').css('background-color', someColor);
}

但我希望用户能够根据类的内容重置为原始颜色（另一个按钮单击）：

function resetClass()
{
   jQuery('#currentColor').removeClass('testThing');
   jQuery('#currentColor').addClass('testThing');
}

似乎这样可行（Albiet 不是最好的方法），但控件的背景颜色不会重置为该类中保存的原始值。

现在要么我需要弄清楚为什么要添加的删除不会重置它，要么只是一种更好的方法......看起来删除和读取类似乎很愚蠢......

【问题讨论】：

标签： jquery css

【解决方案1】：

Jquery 在 style 属性中添加 CSS，它的优先级高于 CSS 文件中的内容。您没有使用该函数更改您的 CSS 文档，因此添加、删除和添加类没有任何效果，因为它根本没有被修改！

您应该使用相同的功能，但这次将背景颜色设置为黑色。

function reset(this)
{
  $(this).css('background-color', '#000000');
}

或者干脆去掉style属性

function reset(this)
{
  $(this).removeAttr('style');
}

【讨论】：

这只有在你没有其他想要保留的样式设置时才有效
嗯，它清除了使用 Jquery 所做的每一个修改，这正是他想要的。不过他仍然可以使用第一个。
记住 removeAttribute() 不再适用于 jquery 而是使用 removeAttr()！
但这会删除元素上的所有样式，从而有效地将其变为白色！ OP问如何恢复原来的风格。为什么不将原始样式暂时存储在一个伪造的元素 ID 中，然后再从那里恢复呢？如果元素是网格视图中的另一行，每第二行有不同的颜色怎么办？
@Fandango68 和其他相关人员，这对我的情况非常有效。它不会删除 user agent 样式，它只会删除应用于元素的样式，特别是作为该元素的属性（通过 Javascript 应用的 AKA 样式，或任何内联样式）

【解决方案2】：

最好只添加另一个覆盖您要更改的样式的类，然后将其删除。它击败了 js 中的硬编码样式信息。唯一的问题是你必须确保添加的类具有更高的顺序，以便元素从它而不是现有的类中获取样式，但这并不难确保。

【讨论】：

【解决方案3】：

我知道这是旧的，但您可以将值设置为空字符串以删除您的自定义样式，如下所示：

// set
$(this).css('background-color', '#000000');

// reset
$(this).css('background-color', '');

【讨论】：

【解决方案4】：

toggleClass("testThing") 呢？当有多个属性要更改时，我会使用它。

【讨论】：