How can use JavaScript to set a style with !important?

Question

I have no problems except when trying to add !important. It just will not take. I need to add it in order to override a font size dynamically.

Here is how I am adjusting the style:

function newFont(newSizeA) {
    var elems = document.getElementsByClassName('a');
    for(i=0; i<elems.length; i++) {
        elems[i].style.fontSize = newSizeA + 'px!important';
    }

}

newFont(20);

With !important it fails, without !important it works.

EDIT: This needs to work back to IE8 so I am hoping there is a cross browser solution that someone knows of.

Answer 1

Your CSS won't parse the !important declaration when written that way (it's expecting only legal values for fontSize in the value space, which means numbers, not numbers and a string). Instead, you can write it this way, by setting the style attribute.

This should be supported by IE8 and up, according to QuirksMode and MSDN.

function newFont(newSizeA) {
    var elems = document.getElementsByClassName('a');
    for(i = 0; i < elems.length; i++) {
        elems[i].setAttribute('style', 'font-size:' + newSizeA + 'px' + '!important');
    }

}

newFont(20);

<div class="a">asdf</div>