代码之家  ›  专栏  ›  技术社区  ›  Jeaf Gilbert

setattribute在IE6中不起作用

  •  2
  • Jeaf Gilbert  · 技术社区  · 14 年前

    如何在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>
    
    2 回复  |  直到 9 年前
        1
  •  9
  •   T.J. Crowder    9 年前

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

    IE6把 setAttribute . 不知道你要处理的确切问题( 这是在编辑指示它是事件处理程序之前 )很难确定这是否真的是问题所在,但这里有几个已知问题:

    你不能用 设置属性 设置事件处理程序

    最好使用反射属性或 addEventListener [标准] attachEvent 不是 设置属性 (和你 不能 使用 设置属性 在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();");
    

    这个 添加事件侦听器 / 附加事件 这样做的方式很酷,因为其他原因:你可以 倍数 元素的同一事件上的事件侦听器。不能使用“反射”属性执行此操作。

    因此,对于您的具体情况:

    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属性的正确方法是使用反射属性 className :

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

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

    IE6中的一个 设置属性 错误是这不起作用:

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

    相反,IE6(可能还有其他几个版本)让您使用 "className" 而不是 "class" 尽管这毫无意义。反映出来的 财产 有名字 类名 因为在javascript中,你不能使用保留字(比如 for if )作为属性文本( obj.class 无效。暂时还不是这样(ecmascript 5修复了它),但这就是为什么反射属性是 类名 不是 class.

    但自从 设置属性 采取了 一串 ,它应该接受属性的正确名称。事实上,它不仅仅是一个IE bug(如果他们不处于[在]兼容模式中]的话,他们已经在现代版本的IE中修复了这个bug)。

    对于

    同样,要设置 对于 属性(例如,on label s),使用 htmlFor 反射属性:

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

    在任何未断开的浏览器上,也可以使用 设置属性 :

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

    …但不是IE6,它想要 "htmlFor" 而不是 "for" 因为同样的原因 “类名” 而不是 “班” (例如,因为它坏了)。

    This page 有相当多与IE有关的属性列表。

    设置属性 无法用于设置 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,将使上述大部分工作变得更加容易,并消除浏览器之间的差异。

        2
  •  1
  •   spinon    14 年前

    我真的会看看jquery。它具有与IE6一起工作的所有功能,这比您这里的代码容易得多。如下所示:

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

    这段代码可能需要稍作调整,因为我只是从内存中编写。

    我说的容易些,因为您在设置类似事件时所做的操作会根据浏览器的不同而有所不同,而且设置起来可能会很头疼。但使用jquery,一切都为您完成了。