javascript - 使用 Javascript 更改样式

Question

<html>
  <head>
    <style>
      #line {
        height: 1px;
        width: 100%;
        float: left;
        background-color: #8e9194;
        position: absolute;
        top: 85%;
        left: 0;
      }
    </style>
  </head>
  <body>
    <button id="b1">Click Here</button>
    <script>
      var o = document.getElementById("line");
      document.getElementById("b1").onmouseover = function () {
        o.style.height = "10px";
      };
      document.getElementById("b1").onmouseout = function () {
        o.style.height = "1px";
      };
    </script>
    <div id="line"></div>
  </body>
</html>

无法使此代码正常工作。我要做的就是在鼠标悬停时增加线条的大小，并在鼠标悬停时将其恢复为 1px。

如果有任何方法可以将一些动画融入其中，那就太好了。

谢谢。

score 2 · Accepted Answer

如果您还需要添加一些动画，我建议使用jQuery。它既快速又简单：

$(function() {
    $("#b1").hover(function() {
        $("#line").stop().animate({ height: 10 }, 1000);
    }, function() {
        $("#line").stop().animate({ height: 1 }, 1000);
    });
});

演示：http: //jsfiddle.net/8YsSd/

score 2 · Accepted Answer

您需要将 JavaScript 放在您所指的元素之后：

<button id="b1">Click Here</button>
<div id="line"></div>

<script> var o = document.getElementById("line");
document.getElementById("b1").onmouseover = function ()
{o.style.height="10px";}; document.getElementById("b1").onmouseout =
function () {o.style.height="1px";}; 
</script>

您的行在var o = document.getElementById("line");元素实际存在之前执行。

jsFiddle 示例

javascript - 使用 Javascript 更改样式

2 回答 2

Related

Reference