Change style with 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>

Can not get this code to work. All i'm trying to do is increase the size of the line on mouseover and get it back to 1px on mouseout.

It would also be nice if theres any way to incorporate some animation into this.

Thanks.

If you can use [jQuery](http://jquery.com), I highly recommend it. If not, drop a comment and I can help with animating with pure JavaScript. — Ricardo Souza, Apr 06 '13 at 22:28

score 2 · Accepted Answer · answered Apr 06 '13 at 22:26

If you also need to add some animation, I'd suggest to use jQuery. It is fast and easy:

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

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

score 2 · Answer 2 · answered Apr 06 '13 at 22:27

You need to put your JavaScript after the elements you're referring to:

<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>

Your line var o = document.getElementById("line"); is being executed prior to the element actually existing.

jsFiddle example

Change style with Javascript

2 Answers2