Home > CSS, Firefox, IE bugs > How to overwrite an !important style property from JavaScript

How to overwrite an !important style property from JavaScript


So today I had to change the background color of a div, which had a CSS class on it, which specified something like:

.cell-selected {background-color : #dedede !important}

Obviously, the first thing I tried in JavaScript was pretty straight-forward, but also wrong:

htmlelement.style.backgroundColor = '#fafafa !important'

This doesn’t work neither on Firefox (3.5), nor on IE (7, 8).
Searching the internet, I found out that the style object has a setProperty method, which has 3 parameters:

setProperty(property, value, priority)

where priority is either an empty string, or ‘important’. However, as with most solutions easy to find, it only works on Firefox, Safari, Opera, probably Chrome too. The apparent solution on Internet Explorer was to create a style tag and add some text content to it, creating a new css class, with the new background color set as !important, then applying that class to htmlelement. All the info regarding this problem can be found on this thread here. The bad news is:

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));

doing something like this won’t help at all. In fact, the call to appendChild will raise an error. To clear this up I started yet again a search on-line. The result is this page. Unfortunatelly, not one solution worked for me. They either raised errors, or, when I did the styleElement.text assignment, it worked on IE8, but not on IE7.

Anyway, after renewed efforts, I found this link right here, which explains very well how to handle style tag creation in IE. However, simply creating DOM nodes and leaving them be is not a good solution. So if you do this, make sure you remove them from the DOM after you’ve done your job. The alternative is creating a memory leak (not a big one, but if the programming style isn’t defensive enough, the page could start leaking memory like a sieve).

So, the final solutions was actually something like:

if(Ext.isIE){
    var newStyle = document.createStyleSheet();
    newStyle.addRule('colorstyle', 'background-color : #fafafa !important;');
    Ext.fly(htmlelement).addClass('colorstyle');
}else{
    htmlelement.style.setProperty('background-color', '#fafafa', 'important');
}
About these ads
Categories: CSS, Firefox, IE bugs
  1. rami
    07/04/2010 at 10:01 | #1

    this code:
    htmlelement.setProperty(‘background-color’, ‘#fafafa’, ‘important’);

    Should be replaced with:
    htmlelement.style.setProperty(‘background-color’, ‘#fafafa’, ‘important’);

    You forgot the style property on the html element…

    BTW, This really helped

    Thanks a lot!
    Rami

    • vladcd
      07/04/2010 at 10:44 | #2

      Thanks for the heads-up. I corrected the line you mentioned.

      I’m glad it helped.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: