Question

我正在编写一个简单的小下拉栏，在按下按钮时触发。我在工作jsfiddle：http://jsfiddle.net/sir_charles804/bC4WD/13/中有它，但它不会在网站上运行。有什么想法吗？在网站上有angularjs jQuery和bootstrap所以我不确定其中一个是否妨碍了。网站上的代码是

HTML

<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 （现在在正文中定义用于测试）

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以反映转换，则会显示，因此我的问题似乎是在javascript中访问该属性。你知道什么会导致我无法访问/更改style.marginTop属性吗？或者为什么更改该属性不会导致保证金被更改？

Answer 1

我通过将该函数放入window.onload = function() {};

来修复它

我的问题是它试图分配未定义的`onclick'属性。

设置样式属性

1 个答案: