Overriding !important style

There are a couple of simple one-liners you can use to do this.

1. Set a “style” attribute on the element:

   element.setAttribute(‘style’, ‘display:inline !important’);

or…

2. Modify the cssText property of the style object:

   element.style.cssText=”display:inline !important”;

Either will do the job.

===

I’ve written a jQuery plugin called “important” to manipulate !important rules in elements, : http://github.com/premasagar/important

===

Edit:
As shared in the comments, the standard CSSOM interface (the API for JavaScript to interact with CSS) provides the setProperty method:

element.style.setProperty(propertyName, value, priority);

E.g:

document.body.style.setProperty('background-color', 'red', 'important');