Is it possible to override remove background none important with jQuery

Question

I have an element which should have a background image  but it s been given the following style in a stylesheet that I m not able to access modify    an-element li     background  none  important      Is it possible to undo that style with jQuery  I ve tried to add background  inhert important with jQuery in two ways  by adding an inline style  and by removing an applied style  Neither work   Here is a Fiddle illustrating the problem  http   jsfiddle net 9bJzk 1   UPDATE  I had the wrong fiddle link  please look again   UPDATE 2  I cannot edit the stylesheet  I ve changed the title to be more clear now  I have to do this with jQuery as I can t control the loading order of the CSS files  but can run jQuery onload   UPDATE 3  I can t explicitly set the  kitten  pic  see the fiddle  with a more accurate CSS selector like selector like  an-element  image-list li as some are suggesting as those images are being written out on the fly  The jsFiddle was just an example  To make it clearer still  Can the effects of the background  none be undone with PURE jQuery and NOT editing of any stylesheets  Thanks for sticking with this

User · Answer

Any  important can be overridden by another  important  the normal CSS precedence rules still apply   Example    an-element      background   F00  important     an-element      background   0F0  important    Makes  an-element green     Then you could add a style attribute  using JavaScript jQuery  to override the CSS    function                an-element   attr  style    background   00F  important           Makes  an-element blue       See the result here

User · Answer

Several problems arise in this question   Problem  1 - css Specificity  how to override important rule    According to specification - to override this selector your selector should be  stronger  which mean it should be important and have at least 1 id  1 class and something else - according to you creating this selector is impossible as you can t alter page content   So the only possible option is to put something into element style which  could be done with js   Note  style rule should also have  important to override   Problem  2 - background is not a single property - it is a set of properties  see specification   So you really need to know what are exact names of properties you want to change  in your case it would be background-image   Problem  3 - How to remove rule already applied  to get previous value    Unfortunately css have no mechanism to dismiss rule which qualify for an element - only to override with  stronger  rule  So you won t be able to solve this task with just setting value to something like  inherit  or  default  cause value you want to see is neither inherit from parent nor default  To solve this problem you have couple of options   1  You may already know what is the value you want to apply  For example you can find out this value based on selector used  So in this case you may know that for selector   image-list li  you need  background-image  url  http   placekitten com 150 50    If so - just you this script   jQuery   image-list li   attr  style    background-image  url  http   placekitten com 150 50    important        2  If you don t know the value then you can try to alter page content in such a way  that rule you want to dismiss is no longer qualify for element  whereas rule you want to be shown - still qualify  In this case you may temporary remove id from container element  Here is the code   jQuery   an-element   attr  id        var backgroundImage   jQuery   image-list li   css  background-image    jQuery   an-element   attr  id    an-element    jQuery   image-list li   attr  style    background-image      backgroundImage      important        Here is link to fiddle http   jsfiddle net o3jn9mzo   3  As third solution - you may generate element which will qualify for desired selection to find out property value - something like this   var backgroundImage   jQuery   lt div class  image-list  gt  lt li gt  lt  li gt  lt  div gt    find  li   css  background-image    jQuery   image-list li   attr  style    background-image      backgroundImage      important        P S   Sorry for really late response

User · Answer

div   background  none  important   div   background  red      Is transparent   div   background  none  important   div   background  red  important      Is red   An  important can override another  important   If you can t edit the CSS file you can still add another one  or a style tag in the head tag

User · Answer

Why does not it work  Because the background CSS with background none important has one  ID  A CSS selector file that contains an  id will always have a higher value than one  class  If you want to work  you need add  id on your  image-list li like this    an-element  image-list li       display  inline-block      background-image  url  http   placekitten com 150 50   important      padding  1em      border  1px solid blue      result here

User · Answer

Yes it is possible depending on what css you have  you simply just declare the same thing with a different background like this   ul li       background  none  important     ul li      background  blue  important      But you have to make sure the declaration comes after the first one seeing as it is cascading   Demo  You can also create a style tag in jQuery like this     head   append   lt style gt   an-element li   background  inherit  important    lt  style gt       Demo  You cannot see any changes because it s not inheriting any background but it is overwriting the background  none

User · Answer

With a  lt script gt  right after the  lt style gt  that applies the  important things  you should be able to do something like this   var lastStylesheet   document styleSheets document styleSheets length - 1   lastStylesheet disabled   true   document write   lt style type  text css  gt        Call fixBackground for each element that needs fixing document write   lt  style gt      lastStylesheet disabled   false   function fixBackground el        document write  html      el id       background-image              document defaultView getComputedStyle el  backgroundImage              important           This probably depends on what kind of browser compatibility you need  though

[jquery] Is it possible to override / remove background: none!important with jQuery?

Examples related to jquery

Examples related to css