자바 스크립트로 스타일 변경

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

이 코드를 사용할 수 없습니다. 내가하려는 것은 mouseover에서 줄의 크기를 늘리고 mouseout에서 1px로 다시 가져 오는 것입니다.자바 스크립트로 스타일 변경

일부 애니메이션을이 방법에 통합하는 것이 좋은 방법 일 수도 있습니다.

감사합니다.

출처

2013-04-06 Borsn

는 [jQuery를은 (http://jquery.com), 내가보기 엔 그것을하는 것이 좋습니다. 그렇지 않다면 댓글을 달아주세요. 순수한 자바 스크립트로 애니메이션을 만들 수 있습니다. – 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

<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

답변

관련 문제