Take the 2-minute tour ×

how to set element attribute with javascript in IE6..? It seems setAttribute doesn't work. I really need to do it on the fly. Thanks.


    menuItems = document.getElementById("menu").childNodes; 
    for (i = 0; i < menuItems.length; i++)
        if (menuItems[i].className != "blue") 
            menuItems[i].setAttribute('onmouseover', 'HoverMenu(this)'); 
share|improve this question
I've used setAttribute on IE6 and it works. Maybe something else is causing a problem? –  casablanca Jul 2 '10 at 4:17
Can we see the code? –  Yisroel Jul 2 '10 at 4:18

2 Answers 2

up vote 8 down vote accepted

(Most of the below was before the OP clarified they were setting an event handler; left the list of other issues in case others find them useful)

IE6 makes a mess of several aspects of setAttribute. Without knowing the exact problem you were dealing with (this was before the edit inidicating it was an event handler), it's hard to be sure whether that's really the problem, but here are a couple of known issues:

You can't use setAttribute to set event handlers

It's best to set event handlers using the reflected property or with addEventListener [standard] / attachEvent [IE], not setAttribute (and you can't use setAttribute on IE).

So, any of these will work:

// Using reflected property
theElement.onclick = yourFunction;

// Using DOM2 standard addEventListener; note it's "click", not "onclick"
theElement.addEventListener("click", yourFunction, false);

// IE's non-standard alternative to addEventListener
theElement.attachEvent("onclick", yourFunction);


// This doesn't work on IE (at least)
theElement.setAttribute("onclick", "yourFunction();");

The addEventListener / attachEvent way of doing this is cool for other reasons: You can have multiple event listeners on the same event of an element. You can't do that using the reflected property.

So for your specific situation:

menuItems = document.getElementById("menu").childNodes; 
    if (menuItems[i].className != "blue") {
        menuItems[i].onmouseover = function() {

Certain attributes need their modified names

To set the class attribute, you have to use the name "className" even though there's no technical reason you should have to (since setAttribute takes a string for the attribute name, there's no conflict with reserved words); most other browsers use "class". Example: On most other browsers, both of these lines will set the class on the element:

theElement.setAttribute("class", "foo"); // String for name, "class" should be fine
theElement.className = "foo";            // Reflected property avoids keyword clash

...but on IE6 that first line doesn't work, it has to be

theElement.setAttribute("className", "foo");

...which doesn't work on some other browsers. Similarly, to set the "for" attribute (of a label, for instance), you have to use "htmlFor" instead of "for".

(Again, the altered names make sense with the reflected properties for these on DOM element instances, to avoid conflicts with reserved words in scripting languages, but not the string names being passed into setAttribute.)

This page has quite a list of attributes that are problematic with IE.

setAttribute can't be used to set the style attribute

...you have to use the style property instead; but to be fair, that's usually a more convenient way. Example: This won't work on IE:

theElement.setAttribute("style", "color: blue"); // Doesn't work on IE

...but this will:

myElement.style.color = "blue";

Slightly OT: Look at libraries

JavaScript libraries like Prototype, jQuery, Closure, or any of several others will make most of the above a lot easier and smooth out differences amongst browsers if you go through their APIs.

share|improve this answer
I've changed to menuItems[i].onmouseover = "HoverMenu(this)"; but still no luck. –  Jeaffrey Gilbert Jul 2 '10 at 4:40
just a point on this you don't have to set it as a string. It would be more like: menuItems[i].onmouseover = HoverMenu; you can access the menu item in the method by using the this keyword. –  spinon Jul 2 '10 at 4:43
@spinon: Agreed, when I was writing my answer originally they hadn't said they were setting an event handler! So it was a bit general to start. :-) –  T.J. Crowder Jul 2 '10 at 4:47
@Jeaffrey: It should be just menuItems[i].onmouseover = function() { HoverMenu(this); }; (or just menuItems[i].onmouseover = HoverMenu; if you update HoverMenu to use this rather than an argument). I've reformatted my answer and added an update of your specific code. –  T.J. Crowder Jul 2 '10 at 5:15
menuItems[i].onmouseover = function() { HoverMenu(this); }; is PERFECTO! :P Thank you Mr. Tj. It had not worked because of the IETester v0.4.4! I don't know it doesn't show latest changes of your code after error on your code occurred even you have refreshed it :( I don't have IE6 on my Win7 –  Jeaffrey Gilbert Jul 2 '10 at 6:21

I would really look at jquery. It has all the functionality that works with IE6 and this would be so much easier than the code you have here. It would look like this:

menuItems = $("#menu")[0].childNodes; 
$.each(menuItems, function()
    var item = $(this);
    if (item.attr("className") != "blue")

This code might need to be tweaked a little as I am just writing from memory.

I say easier because what you are trying to do in setting events like this varies based on browser and can be a headache to setup. But with jquery it is all done for you.

share|improve this answer
item.mouseover = HoverMenu; should be item.bind("mouseover", HoverMenu); or item.hover(HoverMenu, $.noop); –  icktoofay Jul 2 '10 at 4:45
Here is the jquery doc that says this should work: api.jquery.com/mouseover –  spinon Jul 2 '10 at 4:54
No, mouseover on a jQuery object is a function: item.mouseover(HoverMenu); It's just shorthand for item.bind("mouseover", HoverMenu); –  T.J. Crowder Jul 2 '10 at 5:13
T.J you're right I'm sorry. I couldn't figure out what you were talking about as to why this was wrong because I write it all the time. Then when looking at what you wrote right now I realized I was confusing the = sign for the function declaration I do inside the method call. So it should have been item.mouseover(HoverMenu)' or like I usually write it item.mouseover(function() { /* some code */ }); Sorry I wasn't seeing where the disconnect was. –  spinon Jul 2 '10 at 6:52

Your Answer


