jQuery:暂时更改样式然后重置为原始类

时间:2009-06-27 19:05:18

标签: jquery css

假设我有一个名为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不是最好的方法)但控件的背景颜色不会重置为该类中保存的原始值。

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

4 个答案:

答案 0 :(得分:110)

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

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

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

答案 1 :(得分:78)

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

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

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

或者只是删除样式属性

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

答案 2 :(得分:4)

toggleClass("testThing")怎么样?当需要更改多个属性时,我会使用它。

http://api.jquery.com/toggleClass/

答案 3 :(得分:2)

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