setAttribute在IE6中不起作用

Question

如何在IE6中用javascript设置元素属性..？它似乎setAttribute不起作用.我真的需要动态地做.谢谢.

码

<script type="text/javascript" language="javascript"> 
    menuItems = document.getElementById("menu").childNodes; 
    for (i = 0; i < menuItems.length; i++)
    { 
        if (menuItems[i].className != "blue") 
            menuItems[i].setAttribute('onmouseover', 'HoverMenu(this)'); 
    } 
</script>

Answer 1

(以下大部分是在OP澄清他们正在设置事件处理程序之前;留下其他问题的列表,以防其他人发现它们有用)

IE6弄乱了几个方面setAttribute.不知道你处理确切的问题(这是编辑inidicating这是一个事件处理前),这是很难确定这是否是真正的问题,但这里有几个已知问题:

您不能用于setAttribute设置事件处理程序

最好使用reflect属性或addEventListener[standard]/attachEvent[IE] 设置事件处理程序,而不是setAttribute(并且不能setAttribute在IE上使用).

所以,任何这些都可行:

// 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();");

该addEventListener/ attachEvent这样做的办法是冷静其他原因:你可以有多个上的元素的同一事件事件侦听器.你不能使用反射属性来做到这一点.

所以针对您的具体情况:

menuItems = document.getElementById("menu").childNodes; 
for (i = 0; i < menuItems.length; i++)
{ 
    if (menuItems[i].className != "blue") {
        menuItems[i].onmouseover = function() {
            HoverMenu(this);
        }
    }
}

某些属性需要修改其名称

class

设置class属性的正确方法是使用reflect属性className:

// Correct, cross-browser way. Works on IE6+, all versions of
// Chrome, etc. Completely reliable.
theElement.className = "new set of classes";

或者在现代浏览器上(所以,不是IE6!)你可以使用classList.

IE6的许多setAttribute错误之一是这不起作用:

// Should also work, but fails on IE6 (and probably some other old versions)
theElement.setAttribute("class", "new set of classes");

相反,IE6(可能还有其他几个版本)让你使用"className"而不是"class",尽管这没有任何意义.反射属性具有名称,className因为它曾经是在JavaScript中,您不能使用保留字(如class或for或if)作为属性文字(obj.class无效).这一段时间不是真的(ECMAScript 5修复它),但这就是反射属性的原因className,而不是class.

但是由于setAttribute需要一个字符串,它应该接受该属性的正确名称.事实上它不仅仅是一个IE错误(如果它们不在[兼容]模式下,它们已经在IE的现代版本中修复了).

for

同样,要设置for属性(例如,在labels上),可以使用htmlForreflect属性:

// Correct, cross-browser way. Works on IE6+, all versions of
// Chrome, etc. Completely reliable.
theLabel.htmlFor = "id-of-field";

在任何非破坏的浏览器上,您还可以使用setAttribute:

// Should also work, but fails on IE6 (and probably some other old versions)
theLabel.setAttribute("for", "id-of-field");

...但不是在IE6上,它想要"htmlFor"而不是"for"出于同样的原因"className"而不是"class"(例如,因为它已经坏了).

这个页面有很多属于IE的属性列表.

setAttribute不能用于设置style属性

......你必须使用这个style属性; 但公平地说,这通常是一种更方便的方式.示例:这不适用于IE:

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

......但这会:

myElement.style.color = "blue";

稍微OT:看看图书馆

像Prototype,jQuery,Closure或其他几个 JavaScript库这样的JavaScript库可以使上述大部分内容变得更容易,并且如果你通过他们的API,可以平滑浏览器之间的差异.