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.

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.