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;
}
Ads by Google
Posted by ellen at May 02, 2011 06:54 PM
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;
Thanks to Premasagar on Stackoverflow, I've found a working method for overriding the visibilty style: use the cssText property:
document.getElementById("player").style.cssText = 'visibility:visible !important'Ads by Google
