Изменить стиль с помощью 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

Было бы неплохо, если бы любой способ включить в него некоторую анимацию.

Спасибо.

источник

2013-04-06 Borsn

Если вы можете использовать [JQuery] (http://jquery.com), я очень рекомендую его. Если нет, отбросьте комментарий, и я смогу помочь с анимацией с использованием чистого JavaScript. – rcdmk

Если вам также необходимо добавить анимацию, я бы предложил использовать jQuery. Это быстро и легко:

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

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

источник

2013-04-06 22:26:54 VisioN

Большое вам спасибо. – Borsn

Вы должны поставить 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

источник

2013-04-06 22:27:43 j08691

Изменить стиль с помощью Javascript

ответ

Смежные вопросы