jQuery：临时更改样式然后重置为原始类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1053418/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: Temporarily change a style then reset to original class
提问by Programmin Tool
Say I have a class named testThing:
假设我有一个名为 testThing 的类：
.testThing
{
background-color:#000000;
float:left;
height:50px;
width:50px;
}
And I want to be able to test a background color change to whatever control is of that class on a button click:
我希望能够在单击按钮时测试该类的任何控件的背景颜色更改：
function setColor(someColor)
{
jQuery('.testThing').css('background-color', someColor);
}
But I want the user to be able to reset to the original color (another button click) based on what the class has:
但我希望用户能够根据类具有的内容重置为原始颜色（另一个按钮单击）：
function resetClass()
{
jQuery('#currentColor').removeClass('testThing');
jQuery('#currentColor').addClass('testThing');
}
Seems like this would work (Albiet not the best way to do this) but the control's background color doesn't reset to the original value held in that class.
似乎这会起作用（Albiet 不是执行此操作的最佳方法），但控件的背景颜色不会重置为该类中保存的原始值。
Now either I need to figure out why that remove to add doesn't reset it OR just a plain better way of doing it... seeing as it seems silly to remove and readd the class...
现在，要么我需要弄清楚为什么要添加的删除不会重置它，或者只是一种更好的方法……因为删除和阅读课程似乎很愚蠢……
回答by jscheel
I know this is old, but you can just set the value to an empty string to remove your custom style like so:
我知道这是旧的，但是您可以将该值设置为空字符串以删除您的自定义样式，如下所示：
// set
$(this).css('background-color', '#000000');
// reset
$(this).css('background-color', '');
回答by Gab Royer
Jquery adds CSS in the style attribute which has higher priority over what is in your CSS file. You're not changing your CSS document with that function and thus adding and removing and adding the class have no effect since it hasn't been modified at all!
Jquery 在 style 属性中添加 CSS，它比 CSS 文件中的内容具有更高的优先级。您没有使用该函数更改 CSS 文档，因此添加、删除和添加类没有任何效果，因为它根本没有被修改！
You should use the same function but set the background color to black this time.
您应该使用相同的功能，但这次将背景颜色设置为黑色。
function reset(this)
{
$(this).css('background-color', '#000000');
}
Or simply remove the style attribute
或者干脆删除 style 属性
function reset(this)
{
$(this).removeAttr('style');
}
回答by Alexandra
What about toggleClass("testThing")? I use it when there's more than one property to change.
怎么样toggleClass("testThing")？当有多个属性要更改时，我会使用它。
回答by redsquare
It is better to just add another class that overrides the style you want to change and then remove it. It beats hard coding style info inside the js. The only issue is youll have to ensure the added class is of a higher order so that the element takes the style from it rather than the existing class but this is not hard to ensure.
最好添加另一个覆盖您要更改的样式的类，然后将其删除。它击败了 js 中的硬编码样式信息。唯一的问题是您必须确保添加的类具有更高的顺序，以便元素从中获取样式而不是现有类，但这并不难确保。
