How to override the !important CSS style attribute using Javascript

Posted on by

I’ve worked on a few projects where a CSS style on some page element has been specified as “!important” and it interferes with the way the page functions. Ordinarily, I would just change the original style, but sometimes I don’t have control over the stylesheet or script that is generating the style. One example is a recent project where an embedded Captivate player is written to a custom HTML wrapper at by the javascript SWFObject.js. SWFObject writes style attributes to the page dynamically to hide the Captivate player as required until it is fully loaded: 

object, embed {
              visibility:hidden !important;
}

We don’t really have control over the content of the SWFObject script itself, so when we want to override the visibility attribute for a custom function, it is necessary to programmatically tell the Captivate to “show itself” after being written to the page.

However, the !important attribute prevents the normal method of overriding the visibility style . For instance, a statement like this will not change the style of an element marked “visibility:hidden !important;”:

document.getElementByID('player').style.visibility = visible;

To override the important attribute and change the style to “visible”, use the “cssText” property instead:

document.getElementById("player").style.cssText = 'visibility:visible !important'