javascript set className property for Internet Explorer

Question

I set className property of a dinamically generated select control with the following code:

oField.className ="select";

It works for Firefox not for Internet Explorer. How can I set this property on IE?

The code:

var oField = document.createElement("select");  
if(browser == "IE"){  
    oField.size = 1;  
    oField.setAttribute("name","sele"+num); 
    oField.onChange = function(){
        AggiungiRiga(oField.name,oField.value)
    };
}  
else{  
   oField.setAttribute("size",1);
   oField.setAttribute("name","sele"+num);
   oField.setAttribute("onChange","AggiungiRiga(this.name,this.value)");
}  
oField.className ="select";

Here I add it to the document:

oTd1.appendChild(oField);

(oTd1 is the <td> element where the select control must be place). I know the code is not of good quality cause is legacy code.

Assuming that `oField` is an HTMLElementNode, that should work just fine in IE. Your problem likely lies elsewhere. — Quentin, Nov 02 '11 at 12:19
oField is just a variable. I set id, name, value, className and then I add it at the document. — Antonio F., Nov 02 '11 at 12:22
You should not be using "setAttribute()" for any of the things you're doing in that code. — Pointy, Nov 02 '11 at 12:41

david · Answer 1 · 2011-11-02T14:07:53.820

I see no appendChild() method, where are you appending the select element?

not appending the oField to the document could be causing you issues.

eg:

document.body.appendChild(oField);

Also where are the variables browser and num declared from? i guess if its working in FF num is declared.

 var oField = document.createElement("select");

 oField.size = 1;
 oField.name = "sele" + num; 

 oField.onChange = function(){AggiungiRiga(oField.name,oField.value)};

 oField.className = "select";

 document.getElementById('tabella').getElementsByTagName('TBODY')[0].childNodes[0].firstChild.appendChild(oField)

Do you know what would of made it easy i had a id for the TD and it worked, i would be easer if you had a TD id="" any way if you wanted the select to be placed in the first TD this will do it compleate example shown above

   document.getElementById('tabella').getElementsByTagName('TBODY')[0].childNodes[0].firstChild.appendChild(oField)

you would however need to have the table as compact

<table id="tabella"><tr><td></td></tr></table>

@AntonioF looking at you code you do not need to check if(browser == "IE"), because just appending onchange will be ok, ive update my answer — david, Nov 02 '11 at 13:00
oTd1 is object that is appended to oTr (a object) that is appended to a table by: document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr); — Antonio F., Nov 02 '11 at 13:41

score -6 · Answer 2 · answered Nov 02 '11 at 12:26

-6

Why don't you try do it with jquery:

$('#idElement').attr('class', 'classname');

Or just with javascript :

document.getElementById("idElement").setAttribute("class", "className");

answered Nov 02 '11 at 12:26

Daggeto

943
1
8
17

1

There's no reason to use "setAttribute()" to set the "className" property of a real DOM element. – Pointy Nov 02 '11 at 12:28
2

`setAttribute` is broken in (not much) older versions of IE, in particular if you try to set the `class` attribute then it will try to set the `class` *property* and not the `className` property, so this won't work. – Quentin Nov 02 '11 at 12:31
4

If I put aside my general dislike of "run to jQuery for the most trivial problem" answers, then if you *are* going to use jQuery to twiddle with class names, then it has `addClass` and friends so using `attr` is generally a poor choice for that task. – Quentin Nov 02 '11 at 12:32

javascript set className property for Internet Explorer

2 Answers2