스타일 속성 설정

Question

버튼 클릭으로 트리거되는 간단한 작은 드롭 다운 바를 쓰고 있습니다. jsfiddle : http://jsfiddle.net/sir_charles804/bC4WD/13/에서 작업했으나 사이트에서 실행되지 않습니다. 어떤 아이디어? 사이트에는 anglejs jQuery와 부트 스트랩이있어서 그 중 하나가 방해가되는지 확신 할 수 없습니다. 이 사이트 코드 (외부 시트)

<div id="notificationBar"> 
    Latest Major News Update 
    <button class="pull-right" style="position:relative;" id="hideButton" >notification </button> 
</div> 
<button class="pull-right notificationButton" id="showbutton">notification </button> 

JS은 (테스트 지금 본문에 정의)

HTML

var showNotifications = function() { 
    document.getElementById("notificationBar").style.marginTop = "-8px"; 
}; 
var hideNotifications = function() { 
    document.getElementById("notificationBar").style.marginTop = "-40px"; 
}; 

var showButton = document.getElementById('showButton'); 
var hideButton = document.getElementById('hideButton'); 

showButton.onclick = showNotifications; 
hideButton.onclick = hideNotifications; 

CSS 인

#notificationBar { 
    display: block; 
    background-color: #cccccc; 
    color:black; 
    height: 30px; 
    width:100%; 
    z-index: 4; 
    padding:0px; 
    right:0px; 
    left:0px; 
    margin:0px; 
    position:absolute; 
    margin-top:-40px; 
    -webkit-transition:margin-top .5s ease-in-out; 
    -moz-transition:margin-top .5s ease-in-out; 
    -o-transition:margin-top .5s ease-in-out; 
    transition:margin-top .5s ease-in-out; 
    box-shadow:1px 0 3px rgba(0, 0, 0, .75); 
} 

뭐가 잘못된가요?

편집 :

내가 수동으로 나타납니다 다음 전환을 반영하기 위해 CSS를 변경, 그래서 내 문제는 자바 스크립트의 속성에 액세스하는 것 같다합니다. style.marginTop 속성에 액세스/변경할 수 없도록하는 원인을 알고 있습니까? 왜 그 속성을 변경해도 마진이 변경되지 않을까요?

Answer 1

나는 정의의 '온 클릭'속성을 할당하려고했던 것이 었습니다 window.onload = function() {};

내 문제로 그 기능을 넣어 그것을 해결했습니다.