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”分配给＆lt; div＆gt;如下：

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

是否存在“jquery方式”来恢复listitem“bar”在包含＆lt; div＆gt;时继承的属性最初被分配了“cls”类？显然无需做：

$("#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");

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

Demo here

Answer 2

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

Answer 3

使用.css时，会为元素添加样式属性。只要在呈现页面时没有样式属性，调用$().removeAttr('style')就可以执行您想要的操作。

JsFiddle Example

Answer 4

尝试：$("#bar").removeAttr('style')

Answer 5

您可以获取特定的CSS属性并将其存储在字符串中。然后，您可以在完成更改后还原它。但是你必须小心CSS属性的名称：这是工作： http://jsfiddle.net/KgEjr/4/

var myOriginal = "" ;

$('#st').click(
    function() { storeAndChange(); } );


$('#re').click(
    function() { restore(); } );


function storeAndChange()
{
    myOriginal = $("#bar").css("border-left-color");

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


function restore()

{

    $("#bar").css("border-left-color", myOriginal);
    $("#msg").text("restored");


}

Answer 6

您可以将样式存储在数据属性中并在以后恢复吗？这似乎适用于你的例子。

$(function(){
    $(".cls ul li").each(function(){
        $(this).data("defaultStyle",$(this).attr("style") || "");
    });

    $("#foo").css({"border-left-color": "#ff00ff", "font-style": "italic", "background-color": "#efefef"});
    $("#bar").css({"border-left-color": "#0000ff", "font-weight": "bold", "background-color": "#cdcdcd"});

    $(".cls ul li").click(function(){
        $(this).attr("style", $(this).data("defaultStyle")); 
    });
});

使用jquery恢复元素样式

6 个答案: