Question

I am trying to create a jquery treeview plugin for my current project. Plugin can run well with firefox at this moment; however, when running with IE, all the css style cannot be applied. For example, i define in the css file #button {…}, then when i generate the control with id=”button”, it cannot retrieve the style from the css. How can i solve this issue ?

This is some of my codes

In the js file

    createControls = function() {

    nDiv = document.createElement("div");       
    nTxt = document.createElement("input");
    nTxt.setAttribute('id','txtAdVal');
    nTxt.setAttribute('type','text');
    nTxt.setAttribute('style' , "width:300px");

    nBut = document.createElement("button");
    nBut.innerHTML = "Show Active Directory Tree";
    nBut.setAttribute("class", "button");

    nDiv.appendChild(nTxt);
    nDiv.appendChild(nBut);

    $(nBut).bind('click', function(event) {
        createTree();
    });

    return nDiv;
};

and in the css file

.button{...}

Answer 1

What about changing:

nBut.setAttribute("class", "button");

To:

nBut.className = "button";

Since you are already including jQuery you can also make sure you are doing everything cross-platform:

nBut = $("<button class='button'>Show Active Directory Tree</button>");
nDiv.append(nBut);

Note that this requires nDiv to be a jQuery object (nDiv = $('div')).

I found this answer on stackoverflow: How can I reliably set the class attr w/JavaScript on IE, FF, Chrome, etc.?