Adding the !important css declaration to element(s) using JavaScript?

As odd as it sounds, I’m in need of a JavaScript way to add the !important declaration to elements.

Unfortunately, it appears that the declaration cannot be set like in this very rough example:

EL_STYLE = currentStyle/getComputedStyle/etc.; + ' !important';

Any other crazy ideas?

When you set the inline style it over-rules all other styles for that element, so !important is of no use there anyway.

If you want to change the css stylesheet where !important does work, takes you through the process.

Thanks, Paul. Stylesheet switching is interesting, but won’t work in this scenario.

My expectations aren’t much, but if there happens to be some straight DOM method, I’d love to hear about it.

I don’t mean stylesheet switching. The information at quirksmode takes you through making live changes to the external stylesheet that was loaded into memory.

All linked and embedded stylesheets are available through document.stylesheets …

If you’re going to be placing !important anywhere, then it is in those stylesheet rules that it would have to go, which you can do through javascript.

Paul, you’re absolutely right! I should’ve given that a more thorough read, sorry about that.

cssRules[] / rules[] look promising, so I’ll see what I can come up with tomorrow. Thanks!

So I gave it a try and, unfortunately, came across some ridiculous cross-domain issue.

Firefox and Opera refuse to access the rules of external stylesheets.


Explorer and Safari work without a hitch.

On a totally unrelated note, I JUST posted the above – 19 minutes ago, and that post just turned up in a Google search!

Wow… that is the fastest [coincidental?] indexing ever. And if you’re wondering, I’m completely logged out of all Google services, I don’t use Google Desktop, and well… wow. Incredible.