CODEWITHSUNDEEP
javascriptinternet-explorercross-browser
The Dark Knight
The Dark Knight

Reputation: 5585

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

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 .

Upvotes: 1

Views: 3386

Answers (1)

Quentin
Quentin

Reputation: 943537

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

Upvotes: 1

Related Questions