Question: Say I have the following 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;
}

```

I assign the class "cls" to a <div> as follows:

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

```

If I manipulate element properties using jquery, say I change the border-left-color on the "bar" listitem as follows:

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

```

Is there a "jquery way" to RESTORE the properties that the listitem "bar" had inherited when the containing <div> was initially assigned the class "cls"?
Obviously without having to do: 

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

```

Something in the form of, $().restoreClass() or equivalent???

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

```
Could you store the style in a data attribute and recover it later? This seems to work with your example.

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

```