runningantelope123 runningantelope123 - 4 days ago 7
CSS Question

Reverting Back to Inline Style on Button Click - jQuery

I have a ul li grid on a page that has inline styles being applied to it from a plugin. There are options to select above this list that hides/displays none on them if a checkbox doesn't apply to the item.

I am trying to add a 'reset' button that reverts those styles back to normal, as they were on page load, so it is like the checkbox selection didn't happen.

Here is an example of one style on page load. Notice they are being set from the top and left of the page so I cannot hardcode a specific attribute - this is from the plugin.

position: absolute;
left: 330px;
top: 1320px;


I know I can remove the styles all together with jQuery but I don't know if it's possible to revert the inline styles back as they were on pageload.

Answer

Try this :

<script>
$(function(){
    var default_styles = new Array();

    default_styles = $('ul li').map(function(){ return $(this).attr('style') }).get();

    $('button').click(function(){
        $('ul li').each(function( i,v ){
            $(v).attr('style', default_styles[i] )
        });
    });
});
</script>

Fiddle added : https://jsfiddle.net/ehpmvqL7/3/

Comments