使用Javascript更改样式

问题描述：

<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。使用Javascript更改样式

这也将是很好，如果theres任何方式将一些动画纳入此。

谢谢。

如果你可以使用[jQuery的]（http://jquery.com），我强烈推荐它。如果没有，请发表评论，我可以帮助您使用纯JavaScript进行动画制作。 – rcdmk 2013-04-06 22:28:53

答

如果您还需要添加一些动画，我建议使用jQuery。它是快速和容易的：

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

DEMO：http://jsfiddle.net/8YsSd/

非常感谢。 – Borsn 2013-04-06 22:32:14

答

你需要把你的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 example

使用Javascript更改样式

相关推荐