Restoring elements style using jquery

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 w开发者_JAVA技巧ithout having to do:

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

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

---

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

---

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

---

When you use .css it adds a style attribute to the element. As long as there was not a style attribute when the page was rendered, calling $().removeAttr('style') should do what you want.

JsFiddle Example

---

Try: $("#bar").removeAttr('style')

---

You can get the particular CSS property and store it in a string. Then you can restore it when you are done with the change. But you have to be careful with the name of CSS property : Here it is working: 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");


}

---

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