DOM:如何根据迭代器值设置元素宽度并在mouseover上调用函数

Question

我有这个问题：我用这个教程创建了这个非常好的紧凑导航菜单，但它有一个问题，你必须硬编码高度。我想，作为JS中的一个练习，通过根据迭代器值设置JS中的高度来绕过它，迭代器在元素中查找列表，并遍历中的所有列表元素，嗯。。。list，然后我根据迭代器分配高度（每个列表元素都有15px的空间）。

这是我的代码：

/* Input the current nav menu element id here. Should be unordered. */
function handleListById(idname) {
    var object = document.getElementById(idname);
    var list = object.getElementsByTagName("li");
    for (var i = 0, length = list.length; i < length; i++ ) {
        object.getElementsByTagName("ul")[0].style.height = 15*i + "px";
    }
}

然后我试着用发射

<div class="menu-item" id="first" onmouseover="handleListById('first')">

但它不起作用。我怀疑这与CSS中我用:hover指定更改后的高度有关；而在这里它根本不存在。但那我该怎么办呢？我必须使用jQuery吗？

请不要关注不必要的变量和东西，这是为了帮助自己学习。

Answer 1

许多问题都与您的代码有关。

1. 如果您只想对i进行计时，而该值无论如何都将变为15 * 2，那么为什么要使用for循环呢
2. onmouseover="handleListById(first)"应该像onmouseover="handleListById('first')"一样在first周围有单引号
3. 使用style.height时，必须在末尾附加"px"
4. 您不应该得到只有1的ul元素，而应该得到li
5. document.getElementById("idname")应为不带双引号的document.getElementById(idname)
6. 您不应该设置object的高度，而应该在div中设置ul的高度

试试这个

function handleListById(idname) {
    var object = document.getElementById(idname);
    var list   = object.getElementsByTagName('ul');
    var items  = object.getElementsByTagName('li');
    var height = 0;
    for (var i = 0; i < items.length; i++ ) {
        height += items[i].clientHeight
    }
    list[0].style.height = height + "px";
}

HTML

<div class="menu-item" id="first" onmouseover="handleListById('first')">

不要忘记重置鼠标输出的高度

Answer 2

动态构建高度时需要指定"px"。

object.style.height = (15*1) + 'px';

您在onmouseover属性上也有一个问题，您传入了一个未定义的变量而不是字符串。使用handleListById('first')作为上面的答案，我指定

Answer 3

<div class="menu-item" id="first" onmouseover="handleListById('first');">

而不是`handleListById（第一个）

此外，使用object.style.height = (15*i) + 'px';