jQuery:暂时改变一个样式,然后重置为原始类
假设我有一个名为testThing的类:
.testThing { background-color:#000000; float:left; height:50px; width:50px; }
我希望能够testing一个背景颜色的变化,以任何控制是在一个button点击该类:
function setColor(someColor) { jQuery('.testThing').css('background-color', someColor); }
但是我希望用户能够根据类所具有的颜色重新设置原始颜色(另一个button)
function resetClass() { jQuery('#currentColor').removeClass('testThing'); jQuery('#currentColor').addClass('testThing'); }
看起来像这样会工作(Albiet不是这样做的最好方法),但控件的背景颜色不会重置为该类中的原始值。
现在,无论我需要弄清楚为什么删除添加不会重置或者只是一个简单的更好的方式做…看到这似乎是愚蠢的删除和readd类…
jquery在style属性中增加了CSS,它的优先级高于CSS文件中的CSS。 你不用这个函数来改变你的CSS文档,因此添加,删除和添加类没有任何效果,因为它根本没有被修改!
您应该使用相同的function,但是这次将背景颜色设置为黑色。
function reset(this) { $(this).css('background-color', '#000000'); }
或者干脆删除样式属性
function reset(this) { $(this).removeAttr('style'); }
我知道这是旧的,但您可以将值设置为一个空string来删除您的自定义样式,如下所示:
// set $(this).css('background-color', '#000000'); // reset $(this).css('background-color', '');
那么toggleClass("testThing")
呢? 当有多个属性需要更改时,我使用它。
最好是添加另一个类来覆盖要更改的样式,然后将其删除。 它打败了js里的硬编码风格的信息。 唯一的问题是你必须确保添加的类是一个更高的顺序,以便元素从它而不是现有的类,但这是不难确保的风格。