Class Name not getting changed in IE 7, 8 and chrome

Question

I am trying to change class name of two elements during onload.

Here is my code for the same :

    var browserName=navigator.appName;
    var tfElem = document.getElementById("TTlExpct");
    var blTfElem = document.getElementById("BTLExpct");
    if (browserName=="Microsoft Internet Explorer")
    {
        tfElem.className ="pn-tf";
        blTfElem.className ="pn-tf active";
        }
    else
    {
        tfElem.setAttribute('class', 'pn-tf');
        blTfElem.setAttribute('class', 'pn-tf active');
        }

The else block takes care of the code if its not IE, in mozilla, this is working fine, class name is getting set.

Its not working in IE7 and IE8

and

in chrome, it works only if i reload the page again.

Any help will be appreciated .

Answer 1

There is a bug in the implementation of setAttribute in old versions of IE. In newer versions of IE that bug may be emulated if you do not use a Doctype that triggers standards mode.

Replace:

foo.setAttribute('class', value);

With:

foo.className = value;

Do this everywhere. Don't try to do browser detection. All browsers that support setAttribute('class', value) also support foo.className = value.

The code in your question should be rewritten as:

var tfElem = document.getElementById("TTlExpct");
var blTfElem = document.getElementById("BTLExpct");
tfElem.className ="pn-tf";
blTfElem.className ="pn-tf active";