Extend jquery.css function to override !important styles

Question

I am writing a mail template editor, users can import their existing templates and redesign the template using our visual editor. If the element the user change has !important style property; we have to override the property with jquery.css.

Ex:

 <div id="sendwrapper">
      <button> Send </button>
 </div>

Style

#sendwrapper * {
   color:white !important;
}

I want to change the color white to green. I tried this plugin https://github.com/premasagar/important/blob/master/important.js. This plugin is not so intelligent it set !important for all properties but I expect it should set !important only for the properties which set !important.

Answer 1

Don't have to use too much complected code jquery provides you facilty to overwrite css rule

Simply use this

 $('#sendwrapper').children().css("cssText", "color: green !important;");

I am using children() because as I can see you have applied your css like this: #sendwrapper * So to consider * I am using children().

And cssText simply overwrite your current CSS

And also the kind of module you are creating this is the best suited approach.

DEMO: http://jsfiddle.net/6L0p5gk9/

So no need to extend jQuery CSS function. The functionality you are looking for is already there