使用 JavaScript 设置 HTML 属性

Question

我下面有一个导航栏，

<div id="cmenu" class="cmenu r">

<div id="help"><a onClick="topMenu('help','current')" href="javascript:void(0)"><span>Help</span></a></div>
<div id="refer"><a onClick="topMenu('refer','current')" href="javascript:void(0)"><span>Refer Friends</span></a></div>
<div id="home"><a onClick="topMenu('home','current')" href="javascript:void(0)"><span>Home</span></a></div>

</div>

我想在单击链接时将 div 元素中的“class”属性设置为“current”。所以，我可以在 div/link 上指定新样式。这是我的功能：

function topMenu(id,prNode){
var topMenu=document.getElementById("cmenu").getElementsByTagName("div");
for (var a in topMenu){topMenu[a].removeAttribute("class");} //remove all "current" class (third line)
document.getElementById(id).setAttribute("class",prNode);} //set the new div class as "current" (last line)

但是，不幸的是。我的函数的最后一行不起作用...然后我尝试将最后一行更改为

alert("alert message");

它也不起作用... 但是，当我评论函数的第三行时，最后一行正在工作......第三行有任何错误语法吗？......

Answer 1

像数组一样遍历nodeList（而不是像对象）

for (var a=0;a<topmenu.length;++a){topMenu[a].removeAttribute("class");}

如果像对象一样遍历它，您还将获得nodeList的属性“length”，这会导致错误。

Answer 2

setAttribute 在旧版本的 Internet Explorer 中严重损坏，请勿使用它。为映射到属性的 DOM 属性赋值（并读取而不是使用 getAttribute）。

在本例中，className：

function topMenu(id,prNode){
    var topMenu = document.getElementById("cmenu").getElementsByTagName("div");
    for (var i = 0; i < topMenu.length; i++) {
        topMenu[i].className = '';
    }
    document.getElementById(id).className = prNode;
}

另外，不要使用for in 来遍历数组和类似数组的对象。 for in 遍历对象的所有属性，而不仅仅是编号的属性。