Overriding !important style using Javascript

Question

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.

Much appreciated, Enrico

Answer 1

I believe the only way to do this it to add the style as a new CSS declaration with the '!important' suffix. The easiest way to do this is to append a new <style> element to the head of document:

function addNewStyle(newStyle) {
    var styleElement = document.getElementById('styles_js');
    if (!styleElement) {
        styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        styleElement.id = 'styles_js';
        document.getElementsByTagName('head')[0].appendChild(styleElement);
    }
    styleElement.appendChild(document.createTextNode(newStyle));
}

addNewStyle('td.EvenRow a {display:inline !important;}')

The rules added with the above method will (if you use the !important suffix) override other previously set styling. If you're not using the suffix then make sure to take concepts like 'specificity' into account.

Answer 2

You can nuke the class, but this might have other side effects you don't want.

element.className = null; // or your favorite replacement class

Answer 3

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

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

It might well be something specific to Firefox but it should be fine for your greasemonkey script.

Answer 4

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

1) Set a 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.

===

BTW - if you want a useful tool to manipulate !important rules in elements, I've written a jQuery plugin called "important": http://github.com/premasagar/important

Answer 5

Premasagar, works perfect! Thanks!

Answer 6

Thanks for the tip. I override color: !important with another class with color: !important.

Answer 7

If all you are doing is adding css to the page, then I would suggest you use the Stylish addon, and write a user style instead of a user script, because a user style is more efficient and appropriate.

See this page with information on how to create a user style

Answer 8

Better method I just discovered: try to be more specific than the page CSS with your selectors. I just had to do this today, and it works like a charm! More info on the W3C site: http://www.w3.org/TR/CSS2/cascade.html#specificity