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?
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?
Update: while the following solution works, there's a much easier method. See below.
Here's what I came up with, and I hope this comes in handy - to you or anybody else:
$('#element').attr('style', function(i, style)
{
return style && style.replace(/display[^;]+;?/g, '');
});
This will remove that inline style.
I'm not sure this is what you wanted. You wanted to override it, which, as pointed out already, is easily done by $('#element').css('display', 'inline')
.
What I was looking for was a solution to REMOVE the inline style completely. I need this for a plugin I'm writing where I have to temporarily set some inline CSS values, but want to later remove them; I want the stylesheet to take back control. I could do it by storing all of its original values and then putting them back inline, but this solution feels much cleaner to me.
Here it is in plugin format:
(function($)
{
$.fn.removeStyle = function(style)
{
var search = new RegExp(style + '[^;]+;?', 'g');
return this.each(function()
{
$(this).attr('style', function(i, style)
{
return style && style.replace(search, '');
});
});
};
}(jQuery));
If you include this plugin in the page before your script, you can then just call
$('#element').removeStyle('display');
and that should do the trick.
Update: I now realized that all this is futile. You can simply set it to blank:
$('#element').css('display', '');
and it'll automatically be removed for you.
Here's a quote from the docs:
Setting the value of a style property to an empty string — e.g.
$('#mydiv').css('color', '')
— removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's.css()
method, or through direct DOM manipulation of the style property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or<style>
element.
I don't think jQuery is doing any magic here; it seems the style
object does this natively.
.css('property')
gives you the value, but it doesn't tell you whether it came from an inline style).
Oct 27, 2011 at 21:08
style
object seems to behave in the same manner. I amended my answer with this information.
Feb 12, 2013 at 17:39
$('#element').css('display', '')
?
Feb 11, 2015 at 20:41
.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
style
attribute, this is still worthy of note.
Aug 5, 2014 at 21:36
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!
you can create a jquery plugin like this :
jQuery.fn.removeInlineCss = function (properties) {
if (properties == null) return this.removeAttr('style')
properties = properties.split(/\s+/)
return this.each(function () {
for (var i = 0; i < properties.length; i++)
this.style.removeProperty(properties[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
elem.style.removeProperty('margin-left')
will remove just margin-left
from the style
attribute (and return that property's value). For IE6-8 it's elem.style.removeAttribute()
.
Feb 24, 2016 at 16:51
You can set the style using jQuery's css
method:
$('something:visible').css('display', 'none');
<div style="display:block;">
, $('div').hide()
.
hide
addresses one special case of modifying inline styles. This answer addresses all cases. (hide/show
also have a limitation as two which two values are toggled. i.e. none->block or none->inline.)
hide
/ show
will remember the old value of display
and restore it correctly.
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.
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.
$('div[style*=block]').removeAttr('style');
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="">
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();
$el.css({
height : '',
'margin-top' : ''
});
etc...
Just leave the 2nd param blank!
"jQuery plugin is applying an inline style (display:block). I'm feeling lazy and want to override it with display:none"
. Although your text is correct, your code does not solve the question.
May 15, 2015 at 16:42
Change the plugin to no longer apply the style. That would be much better than removing the style there-after.
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>
$("#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.