[英]setAttribute doesn't work in IE6
how to set element attribute with javascript in IE6..? 如何在IE6中用javascript设置元素属性..? It seems
setAttribute
doesn't work. 似乎
setAttribute
不起作用。 I really need to do it on the fly. 我真的需要动态地做。 Thanks.
谢谢。
Code 码
<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>
(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) (以下大部分是在OP澄清他们正在设置事件处理程序之前;留下其他问题的列表,以防其他人发现它们有用)
IE6 makes a mess of several aspects of setAttribute
. IE6弄乱了
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: 在不知道你正在处理的确切问题的情况下( 这是在编辑之前它是一个事件处理程序 ),很难确定这是否真的是问题,但这里有几个已知的问题:
setAttribute
to set event handlers setAttribute
来设置事件处理程序 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). 最好使用reflect属性或使用
addEventListener
[standard] / attachEvent
[IE]设置事件处理程序,而不是setAttribute
(并且不能在IE上使用setAttribute
)。
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);
...not ...不
// 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. 执行此操作的
addEventListener
/ attachEvent
方法很酷,原因如下:您可以在元素的同一事件上拥有多个事件侦听器。 You can't do that using the reflected property. 你不能使用反射属性来做到这一点。
So for your specific situation: 所以针对您的具体情况:
menuItems = document.getElementById("menu").childNodes;
for (i = 0; i < menuItems.length; i++)
{
if (menuItems[i].className != "blue") {
menuItems[i].onmouseover = function() {
HoverMenu(this);
}
}
}
class
The correct way to set the class attribute is to use the reflected property className
: 设置class属性的正确方法是使用反射属性
className
:
// Correct, cross-browser way. Works on IE6+, all versions of
// Chrome, etc. Completely reliable.
theElement.className = "new set of classes";
or on modern browsers (so, not IE6!) you can use classList
. 或者在现代浏览器上(所以,不是IE6!)你可以使用
classList
。
One of IE6's many setAttribute
bugs is that this doesn't work: IE6的许多
setAttribute
错误之一是这不起作用:
// Should also work, but fails on IE6 (and probably some other old versions)
theElement.setAttribute("class", "new set of classes");
Instead, IE6 (and probably a couple of other versions) make you use "className"
instead of "class"
, even though that makes no sense whatsoever. 相反,IE6(可能还有其他几个版本)会让你使用
"className"
而不是"class"
,即使这没有任何意义。 The reflected property has the name className
because it used to be that in JavaScript, you couldn't use reserved words (like class
or for
or if
) as property literals ( obj.class
was invalid). reflect 属性的名称为
className
因为它曾经是JavaScript中的,你不能使用保留字(如class
或for
或if
)作为属性文字( obj.class
无效)。 That's not been true for a while now (ECMAScript 5 fixed it), but that's why the reflected property is className
, not class.
暂时不是这样(ECMAScript 5修复了它),但这就是为什么反射属性是
className
而不是class.
But since setAttribute
takes a string , it should accept the proper name of the attribute. 但是由于
setAttribute
接受一个字符串 ,它应该接受该属性的正确名称。 The fact it doesn't is just an IE bug (and one they've fixed in modern versions of IE if they're not in [in]compatibility mode). 事实上它不仅仅是一个IE错误(如果它们不在[兼容]模式下,它们已经在IE的现代版本中修复了)。
for
Similarly, to set the for
attribute (for instance, on label
s), one uses the htmlFor
reflected property: 同样,要设置
for
属性(例如,在label
s上),可以使用htmlFor
反射属性:
// Correct, cross-browser way. Works on IE6+, all versions of
// Chrome, etc. Completely reliable.
theLabel.htmlFor = "id-of-field";
On any non-broken browser, you can also use setAttribute
: 在任何非破坏的浏览器上,您还可以使用
setAttribute
:
// Should also work, but fails on IE6 (and probably some other old versions)
theLabel.setAttribute("for", "id-of-field");
...but not on IE6, it wants "htmlFor"
instead of "for"
for the same reason it wants "className"
rather than "class"
(eg, because it's broken). ...但不是在IE6上,它想要
"htmlFor"
而不是"for"
,原因与它想要"className"
而不是"class"
(例如,因为它已经坏了)。
This page has quite a list of attributes that are problematic with IE. 这个页面有很多属于IE的属性列表。
setAttribute
can't be used to set the style
attribute setAttribute
不能用于设置style
属性 ...you have to use the style
property instead; ...你必须使用
style
属性; but to be fair, that's usually a more convenient way. 但公平地说,这通常是一种更方便的方式。 Example: This won't work on IE:
示例:这不适用于IE:
theElement.setAttribute("style", "color: blue"); // Doesn't work on IE
...but this will: ......但这会:
myElement.style.color = "blue";
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. 像Prototype , jQuery , Closure或其他几个 JavaScript库这样的JavaScript库可以使上述大部分内容变得更容易,并且如果你通过他们的API,可以平滑浏览器之间的差异。
I would really look at jquery. 我真的会看看jquery。 It has all the functionality that works with IE6 and this would be so much easier than the code you have here.
它具有适用于IE6的所有功能,这将比您在此处的代码更容易。 It would look like this:
它看起来像这样:
menuItems = $("#menu")[0].childNodes;
$.each(menuItems, function()
{
var item = $(this);
if (item.attr("className") != "blue")
item.mouseover(HoverMenu);
}
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.
但是有了jquery,这一切都为你完成了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.