javascript - 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 的几个方面弄得一团糟。不知道你正在处理的确切问题(这是在编辑之前表明它是一个事件处理程序)，很难确定这是否真的是问题所在，但这里有几个已知问题:

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

最好使用反射属性或 addEventListener 设置事件处理程序[标准]/attachEvent [IE]，而不是 setAttribute(您不能在 IE 上使用 setAttribute)。

因此，任何这些都可以工作:

// 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);
        }
    }
}

某些属性需要修改名称

类

设置类属性的正确方法是使用反射属性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"，尽管这毫无意义。反射的 property 的名称为 className 因为它曾经是 JavaScript 中的名称，您不能使用保留字(如 class 或 for 或 if) 作为属性文字(obj.class 无效)。一段时间以来情况并非如此(ECMAScript 5 修复了它)，但这就是反射(reflect)的属性是 className 而不是 class.

的原因

但由于 setAttribute 接受一个 string，它应该接受属性的正确名称。事实上它不只是一个 IE 错误(如果他们不在 [in] 兼容模式下，他们已经在现代版本的 IE 中修复了一个错误)。

为

类似地，要设置 for 属性(例如，在 label 上)，可以使用 htmlFor 反射属性:

// 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"(例如，因为它坏了)。

This page有相当多的 IE 有问题的属性。

setAttribute 不能用来设置style属性

...您必须改用style 属性；但公平地说，这通常是一种更方便的方式。示例:这不适用于 IE:

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

...但这将:

myElement.style.color = "blue";

略微 OT:查看库

JavaScript 库，如 Prototype , jQuery , Closure , 或 any of several others如果您浏览浏览器的 API，将使上述大部分内容变得更容易并消除浏览器之间的差异。