[jquery] Is it possible to remove inline styles with jQuery?

A jQuery plugin is applying an inline style (display:block). I'm feeling lazy and want to override it with display:none.

What's the best (lazy) way?

you can create a jquery plugin like this :

jQuery.fn.removeInlineCss = (function(){
    var rootStyle = document.documentElement.style;
    var remover = 
        rootStyle.removeProperty    // modern browser
        || rootStyle.removeAttribute   // old browser (ie 6-8)
    return function removeInlineCss(properties){
        if(properties == null)
            return this.removeAttr('style');
        proporties = properties.split(/\s+/);
        return this.each(function(){
            for(var i = 0 ; i < proporties.length ; i++)
                remover.call(this.style, proporties[i]);
        });
    };
})();

usage

$(".foo").removeInlineCss(); //remove all inline styles
$(".foo").removeInlineCss("display"); //remove one inline style
$(".foo").removeInlineCss("color font-size font-weight"); //remove several inline styles

$('div[style*=block]').removeAttr('style');

You can set the style using jQuery's css method:

$('something:visible').css('display', 'none');

The Lazy way (which will cause future designers to curse your name and murder you in your sleep):

#myelement 
{
    display: none !important;
}

Disclaimer: I do not advocate this approach, but it certainly is the lazy way.

$("[style*=block]").hide();

$("#element").css({ display: "none" });

At first I tried to remove inline style in css, but it does not work and new style like display: none will be overwritten. But in JQuery it works like this.

.removeAttr("style") to just get rid of the whole style tag...

.attr("style") to test the value and see if an inline style exists...

.attr("style",newValue) to set it to something else

I had similar issue with width property. I couldnt remove the !important from code, and since it needed this style on a new template I added an Id (modalstyling) to the element and afterwards i added following code to the template:

<script type="text/javascript">
    $('#modalstyling').css('width', '');    //Removal of width !important
    $('#modalstyling').width('75%');        //Set custom width
</script>

Change the plugin to no longer apply the style. That would be much better than removing the style there-after.

In case the display is the only parameter from your style, you can run this command in order to remove all style:

$('#element').attr('style','');

Means that if your element looked like this before:

<input id="element" style="display: block;">

Now your element will look like this:

<input id="element" style="">

$el.css({ height : '', 'margin-top' : '' });

etc...

Just leave the 2nd param blank!

Here is an inlineStyle selector filter I wrote that plugs into jQuery.

$("div:inlineStyle(display:block)") // will select all divs with an inline style of display: block set

In your case you could use this like:

$("div:inlineStyle(display:block)").hide();

If you want to remove a property within a style attribute – not just set it to something else – you make use of the removeProperty() method:

document.getElementById('element').style.removeProperty('display');

UPDATE:
I've made an interactive fiddle to play around with the different methods and their results. Apparently, there isn't much of a difference between set to empty string, set to faux value and removeProperty(). They all result in the same fallback – which is either a pre-given CSS rule or the browser's default value.

The easiest way to remove inline styles (generated by jQuery) would be:

$(this).attr("style", "");

The inline code should disappear and your object should adapt the style predefined in your CSS files.

Worked for me!