使用JavaScript更改div的高度

Question

当我将鼠标悬停在面包屑上时，我试图使100％宽度的3px高度div的高度增加，但我失败了。 这是脚本：

var menuIsOpen = false;
function bc_MouseOver() {
    if (!menuIsOpen)
    {
        menuIsOpen = true;
        for (var int = 4; int == 20; int++)
        {
            document.getElementById("navmenu").style.height = int + "px";
        }
    }
}

和一些HTML（使用MVC）：

<body>
    <div id="navigation">
        <ul id="navlist">
            <li class="titleli">
                <a href="/" target="_self" id="titlelink">Some Title</a>
            </li>
            <li class="breadcrumb" onmouseover="bc_MouseOver()">Projects</li>
            <li class="breadcrumb"></li>
        </ul>
    </div>
    <div id="navmenu"> </div>
    <div class="container">
        @RenderBody() 
   </div>
</body>

Answer 1

您为什么不为此使用CSS？ 使用：hover伪类，或将类应用于悬停到具有过渡的元素上，似乎是最好的答案，但是，如果您热衷于JS：

for (var int = 4; int == 20; int++)
{
  document.getElementById("navmenu").style.height = int + "px";
}

此块是同步的，新的高度将不会应用（可能）直到下一个刻度线的末尾，因此它将仅应用“ 20px”的高度。

您必须找出一种方法，将每个刻度线增加1px，以确保其已渲染然后打开。 jQuery animate非常有用，它可以帮助您节省所有工作（并解决所有潜在的跨浏览器问题），但是如果您热衷于香草JS：

var time = 0;
function bc_mouseOver( i ) {
  var i = i || 4;
   if ( i < 21 ) {
    document.getElementById("navmenu").style.height = int + "px";
    setTimeout( function() {
        bc_mouseOver( i + 1 )
    }, time );
  }
}

您可能必须检查bc_mouseOver是否在范围内，因为setTimeout将在窗口的上下文中运行。 使用lodash / underscore延迟方法是隐藏setTimeout和上下文移动的好方法，通常会使事情变得更加整洁和可靠。

您可能还必须更改可变time才能获得所需的精确值，我在这里做了一个0超时，以在下一个刻度上强制它，但这可能太快了，尤其是在某些环境/平台中。

确实，这可以（可能应该）在几行CSS中完成。

Answer 2

问题出在for循环中您的测试条件。 每次都失败，并且不执行循环。

更改为：

 for (var int = 4; int <= 20; int++) {
        document.getElementById("navmenu").style.height = int + "px";
    }

使用JavaScript更改div的高度

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-05-17 10:38:07

解决方案2
0 2014-05-17 10:30:34

使用JavaScript更改div的高度

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-05-17 10:38:07

解决方案2 0 2014-05-17 10:30:34

解决方案1
1 已采纳 2014-05-17 10:38:07

解决方案2
0 2014-05-17 10:30:34