javascript - 使用 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 class="cls">
<ul>
<li id="foo">Foo</li>
<li id="bar">Bar</li>
</ul>
</div>

如果我使用 jquery 操作元素属性，假设我更改了“bar”列表项上的 border-left-color，如下所示:

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

是否有一种“jquery 方式”来恢复列表项“bar”在包含

最初分配给类“cls”时继承的属性？显然不必这样做:

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

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

最佳答案

定义一个新类

.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");

想象一下，如果您将此代码写了一千遍，而后来您的客户决定将其更改为黄色，那么您将面临怎样的工作。

Demo here

关于javascript - 使用 jquery 恢复元素样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6385986/

上一篇：javascript - 在不丢失事件处理程序的情况下对元素列表进行排序

下一篇：html - 悬停时更改列表元素内的文本和链接颜色

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");

想象一下，如果您将此代码写了一千遍，而后来您的客户决定将其更改为黄色，那么您将面临怎样的工作。

Demo here