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: 
Define a new class

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

```

Then you can toggle the style with

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

```

This is the best way to toggle style. Keep in mind that you can apply more than one class to a single HTML element, so that you can combine styles together. For example

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

```

You should keep your presentation (css) separated from the behavior (js), so the following is not recommended:

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

```

Imagine the work you will have, if you write this a thousand times and later your customer decides to change it to yellow.

[Demo here](http://jsfiddle.net/ruisoftware/eCXT4/3/)
Try: `$("#bar").removeAttr('style')`