使用jquery恢复元素样式

Question

说我有以下css:

.cls {}
.cls ul {list-style-type:none;}
.cls ul li
{
    border-color:#ff0000;
    border-style:solid;
    float:left;
    padding:0px 20px 0px 2px;
    border-left-width:1px;
    border-bottom-width:0px;
    border-top-width:0px;
    border-right-width:0px;
}

我将类"cls"分配给<div>,如下所示:

<div class="cls">
<ul>
<li id="foo">Foo</li>
<li id="bar">Bar</li>
</ul>
</div>

如果我使用jquery操作元素属性,请说我更改"bar"listitem上的border-left-color,如下所示:

$("#bar").css("border-left-color", "#0000ff");

当包含<div>最初被赋予类"cls"时,是否有一种"jquery方式"来恢复listitem"bar"继承的属性？显然无需做:

$("#bar").css("border-left-color", "#ffff00"); }. 

形式为$().restoreClass()或等效的东西???

Answer 1

定义一个新类

.blueBorder {
 border-left-color: #0000ff;
}

然后你可以切换样式

$("#bar").toggleClass('blueBorder'); // with blue border
$("#bar").toggleClass('blueBorder'); // without blue border
$("#bar").toggleClass('blueBorder'); // with blue border

这是切换样式的最佳方式.请记住,您可以将多个类应用于单个HTML元素,以便将样式组合在一起.例如

$("#bar").toggleClass('blueBorder');    // with blue border
$("#bar").toggleClass('redBackground'); // with blue border and red background
$("#bar").toggleClass('blueBorder');    // with red background

您应该将您的演示文稿(css)与行为(js)分开,因此不建议以下内容:

$("#bar").css("border-left-color", "#0000ff");

想象一下你将拥有的工作,如果你写了一千遍,之后你的客户决定把它改成黄色.

在这里演示