使用 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.here 上指定一個新樣式，這是我的功能：

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 的屬性“長度”，這會導致錯誤。

Answer 2

setAttribute在舊版本的 Internet Explorer 中嚴重損壞，不要使用它。 將值分配給（並從中讀取而不是使用getAttribute ）映射到屬性的 DOM 屬性。

在這種情況下， 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遍歷對象的所有屬性，而不僅僅是編號的屬性。