Overriding !important style

Title pretty much sums it up.

The external style sheet has the following code:

td.EvenRow a {
  display: none !important;
}

I have tried using:

element.style.display = "inline";

and

element.style.display = "inline !important";

but neither works. Is it possible to override an !important style using javascript.

This is for a greasemonkey extension, if that makes a difference.

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');

element.style has a setProperty method that can take the priority as a third parameter:

element.style.setProperty("display", "inline", "important")

It didn't work in old IEs but it should be fine in current browsers.