How to apply important using css

Question

I am having trouble applying a style that is  important  I   ve tried       elem   css  width    100px  important      This does nothing  no width style whatsoever is applied  Is there a jQuery-ish way of applying such a style without having to overwrite cssText  which would mean I   d need to parse it first  etc     Edit  I should add that I have a stylesheet with an  important style that I am trying to override with an  important style inline  so using  width   and the like does not work since it gets overridden by my external  important style   Also  the value that will override the previous value is computed  so I cannot simply create another external style

User · Answer

After reading other answers and experimenting  this is what works for me       selector   0  style setProperty   style    value    important       This doesn t work in IE 8 and under  though

User · Answer

You can achieve this in two ways       elem   prop  style    width  100px  important       this is not supported in chrome     elem   attr  style    width  100px  important

User · Answer

Another easy method to solve this issue adding the style attribute       selector   attr  style    width 500px  important

User · Answer

Here is what I did after encountering this problem     var origStyleContent   jQuery   logo-example   attr  style    jQuery   logo-example   attr  style   origStyleContent     width 150px  important

User · Answer

David Thomas   s answer describes a way to use     elem   attr  style         but warns that using it will delete previously-set styles in the style attribute  Here is a way of using attr   without that problem     var  elem       elem     elem attr  style    elem attr  style             width  100px  important      As a function   function addStyleAttribute  element  styleAttribute         element attr  style    element attr  style            styleAttribute         addStyleAttribute     elem     width  100px  important      Here is a JS Bin demo

User · Answer

There s no need to go to the complexity of  AramKocharyan s answer  nor the need to insert any style tags dynamically   Just overwrite style  but you don t have to parse anything  why would you      Accepts the hyphenated versions  i e  not  cssFloat   function addStyle element  property  value  important           Remove previously defined property     if  element style setProperty          element style setProperty property           else         element style setAttribute property               Insert the new style with all the old rules     element setAttribute  style   element style cssText           property         value     important       important                     Can t use removeProperty    because it won t remove  important rules in Chrome  Can t use element style property        because it only accepts camelCase in Firefox    You could probably make this shorter with jQuery  but this vanilla function will run on modern browsers  Internet nbsp Explorer nbsp 8  etc

User · Answer

The safest workaround to this is to add a class and then do the magic in CSS  -   addClass   and removeClass   should do the work

User · Answer

I think it works OK and can overwrite any other CSS before  this  DOM element    this setAttribute  style    padding 2px  important

User · Answer

The easiest and best solution for this problem from me was to simply use addClass   instead of  css   or  attr     For example       elem   addClass  importantClass     And in your CSS file    importantClass       width  100px  important

User · Answer

This solution doesn t override any of the previous styles  it just applies the one you need   var heightStyle    height  500px  important   if     foo   attr  style           foo   attr  style   heightStyle      foo   attr  style   replace   height   -   0-9 a-z  A-Z             else        foo   attr  style   heightStyle

User · Answer

Three working examples  I had a similar situation  but I used  find   after struggling with  closest   for a long time with many variations   The Example Code     Allows contain functions to work  ignores case sensitivity  jQuery expr      contains   function obj  index  meta  stack        result   false      theList   meta 3  split             var contents    obj textContent    obj innerText    jQuery obj  text              for  x 0  x lt theList length  x              if  contents toLowerCase   indexOf theList x  toLowerCase     gt   0                return true                      return false        document  ready function         var refreshId   setInterval  function                 out contains  foo    test456     find   inner   css  width    50px    important           1000      Rescans every 1000 ms       Alternative      inner   each function          this style setProperty  height    50px    important             out   find   inner   css    height    50px       Working  http   jsfiddle net fx4mbp6c

User · Answer

If it is not so relevant and since you re dealing with one element which is  elem  you can change its id to something else and style it as you wish         elem   attr  id    cheaterId      And in your CSS    cheaterId   width  100px

User · Answer

May be it look s like this  Cache var node       selector   0   OR var node   document querySelector   selector     Set CSS node style setProperty  width    100px    important    Remove CSS node style removeProperty  width    OR node style width

User · Answer

It may or may not be appropriate for your situation but you can use CSS selectors for a lot of these type of situations    If  for example you wanted of the 3rd and 6th instances of  cssText to have a different width you could write    cssText nth-of-type 3    cssText nth-of-type 6   width 100px  important     Or    container nth-of-type 3  cssText   container nth-of-type 6  cssText  width 100px  important

User · Answer

I had the same problem trying to change a text color of a menu-item when  event   The best way I found when I had this same problem was   First step  Create  in your CSS  a new class with this purpose  for example    colorw  color  white  important     Last step  Apply this class using the addClass method as follows       menu-item gt a   addClass  colorw      Problem solved

User · Answer

An alternative way to append style in head      head   append   lt style gt   elm width 150px  important   lt  style gt       This appends style after all your CSS files so it will have higher priority than other CSS files and will be applied

User · Answer

I also discovered that certain elements or add-on s  like Bootstrap  have some special class cases where they do not play well with  important or other work-arounds like  addClass  removeClass  and thus you have to to toggle them on off    For example  if you use something like  lt table class  table-hover  gt the only way to successfully modify elements like colors of rows is to toggle the table-hover class on off  like this    your element  closest  table   toggleClass  table-hover      Hopefully this work-around will be helpful to someone

User · Answer

You can do this       elem   css  cssText    width  100px  important       Using  cssText  as the property name and whatever you want added to the CSS as its value

User · Answer

You can set the width directly using  width   like this       elem   width 100     Updated for comments  You have this option as well  but it ll replace all css on the element  so not sure it s any more viable       elem   css  cssText    width  100px  important

User · Answer

Instead of using the css   function try the addClass   function      lt script gt      document  ready function             example   addClass  exampleClass             lt  script gt      lt style gt     exampleClass      width 100   important      height 100   important         lt  style gt

User · Answer

https   jsfiddle net xk6Ut 256   An alternative approach is  dynamically creating and updating CSS class in JavaScript  To do that  we can use style element and need to employ the ID for the style element so that we can update the CSS class  function writeStyles styleName  cssText        var styleElement   document getElementById styleName       if  styleElement  document getElementsByTagName  head   0  removeChild          styleElement       styleElement   document createElement  style        styleElement type    text css       styleElement id   styleName      styleElement innerHTML   cssText      document getElementsByTagName  head   0  appendChild styleElement              var cssText     testDIV  height     height    px  important        writeStyles  styles js   cssText

User · Answer

Most of these answers are now outdated  IE7 support is not an issue   The best way to do this that supports IE11  and all modern browsers is   const  elem       elem     elem 0  style setProperty  width    100px    important        Or if you want  you can create a small jQuery plugin that does this  This plugin closely matches jQuery s own css   method in the parameters it supports          Sets a CSS style on the selected element s  with  important priority     This supports camelCased CSS style property names and calling with an object     like the jQuery  css    method      Unlike jQuery s css   this does NOT work as a getter          param  string Object lt string  string gt   name     param  string undefined  value        jQuery fn cssImportant   function name  value      const  this   this    const applyStyles    n  v    gt           Convert style name from camelCase to dashed-case      const dashedName   n replace       A-Z      g   str  m1  upper  m2    gt          return m1    -    upper toLowerCase     m2                  Loop over each element in the selector and set the styles       this each function          this style setProperty dashedName  v   important                      If called with the first parameter that is an object       Loop over the entries in the object and apply those styles     if jQuery isPlainObject name        for const  n  v  of Object entries name           applyStyles n  v             else          Otherwise called with style name and value      applyStyles name  value            This is required for making jQuery plugin calls chainable    return  this          Call the new plugin      elem   cssImportant  height    100px        Call with an object and camelCased style names      another   cssImportant  backgroundColor   salmon   display   block         Call on multiple items      item   foo   bar   cssImportant  color    red       Example jsfiddle here

User · Answer

I think I ve found a solution  I ve made it into a new function  jQuery style name  value  priority   You can use it to get values with  style  name   just like  css  name    get the CSSStyleDeclaration with  style    and also set values  with the ability to specify the priority as  important   See this  Example var div      someDiv    console log div style  color     div style  color    red    console log div style  color     div style  color    blue    important    console log div style  color     console log div style   getPropertyPriority  color      Example output  null red blue important   The Function  function            if    fn style        return            Escape regex chars with     var escape   function text        return text replace   -                   s  g   quot     amp  quot               For those who need them   lt  IE 9   add support for CSS functions   var isStyleFuncSupported     CSSStyleDeclaration prototype getPropertyValue    if   isStyleFuncSupported        CSSStyleDeclaration prototype getPropertyValue   function a          return this getAttribute a              CSSStyleDeclaration prototype setProperty   function styleName  value  priority          this setAttribute styleName  value         var priority   typeof priority     undefined    priority             if  priority                     Add priority manually         var rule   new RegExp escape styleName       s    s     escape value                    s        gmi            this cssText               this cssText replace rule  styleName          value          priority                            CSSStyleDeclaration prototype removeProperty   function a          return this removeAttribute a              CSSStyleDeclaration prototype getPropertyPriority   function styleName          var rule   new RegExp escape styleName       s    s     s    s  important   s                  gmi          return rule test this cssText     important                        The style function     fn style   function styleName  value  priority           DOM node     var node   this get 0          Ensure we have a DOM node     if  typeof node     undefined           return this               CSSStyleDeclaration     var style   this get 0  style         Getter Setter     if  typeof styleName     undefined           if  typeof value     undefined                Set style property         priority   typeof priority     undefined    priority               style setProperty styleName  value  priority           return this          else              Get style property         return style getPropertyValue styleName                 else            Get CSSStyleDeclaration       return style                jQuery    See this for examples of how to read and set the CSS values  My issue was that I had already set  important for the width in my CSS to avoid conflicts with other theme CSS  but any changes I made to the width in jQuery would be unaffected since they would be added to the style attribute  Compatibility For setting with the priority using the setProperty function  This Article says there is support for IE 9  and all other browsers  I have tried with IE 8 and it has failed  which is why I built support for it in my functions  see above   It will work on all other browsers using setProperty  but it will need my custom code to work in  lt  IE 9

User · Answer

I would assume you tried it without adding  important   Inline CSS  which is how JavaScript adds styling  overrides the stylesheet CSS  I m pretty sure that s the case even when the stylesheet CSS rule has  important   Another question  maybe a stupid question but must be asked     Is the element you are trying to work on display block  or display inline-block    Not knowing your expertise in CSS     inline elements don t always behave as you would expect

User · Answer

const elem       elem    elem 0  style removeAttribute  width    elem 0  style setProperty  width    100px    important      Note  Using Chrome may return an error such as      elem 0  style removeAttribute is not a function   Changing the line to use the  removeProperty function such as to elem 0  style removeProperty  width    fixed the issue

User · Answer

The problem is caused by jQuery not understanding the  important attribute  and as such fails to apply the rule   You might be able to work around that problem  and apply the rule by referring to it  via addClass      importantRule   width  100px  important         elem   addClass  importantRule      Or by using attr         elem   attr  style    width  100px  important      The latter approach would unset any previously set in-line style rules  though  So use with care   Of course  there s a good argument that  Nick Craver s method is easier wiser   The above  attr   approach modified slightly to preserve the original style string properties  and modified as suggested by falko in a comment       elem   attr  style   function i s    return  s           width  100px  important

User · Answer

FYI  it doesn t work because jQuery doesn t support it  There was a ticket filed on 2012   11173   elem  css  property    value  important   fails  that was eventually closed as WONTFIX

User · Answer

We can use setProperty or cssText to add  important to a DOM element using JavaScript   Example 1   elem style setProperty   color    green    important      Example 2   elem style cssText  color  red  important

User · Answer

Do it like this       elem   get 0  style width   100px important

User · Answer

We need first to remove the previous style  I remove it using a regular expression  Here is an example for changing color   var SetCssColorImportant   function  jDom  color           var style   jDom attr  style           style   style replace  color      important  g              jDom css  cssText    color      color      important     style

User · Answer

This solution will leave all the computed javascript and add the important tag into the element  You can do  Ex if you need to set the width with the important tag      exampleDiv   css  width          This will remove the width of the item var styles      exampleDiv   attr  style      This will contain all styles in your item   ex  height auto  display block  styles     width  200px  important     This will add the width to the previous styles   ex  height auto  display block  width  200px  important     exampleDiv   attr  style   styles     This will add all previous styles to your item

[javascript] How to apply !important using .css()?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css