Question

我有一个小按钮和一段javascript代码以及css.I希望我的按钮搜索将顶部位置从-1px更改为51px，但javascript似乎没有响应我更改此属性。那么任何人都可以告诉我我的错误在哪里。我想它可能与css的位置属性有关。无论如何，会感激任何帮助。还有一个问题：我可以让我的盒子像滑动顺利而不是只是弹出？但我现在只对javascript感兴趣，而不是jquery 这是代码

<!DOCTYPE HTML>
<html>
<head>
<style>
#searchButton{
position:fixed;
border:1px solid rgb(255,255,255);
border-right:none;
border-top:none;
width:60px;
height:20px;
top:-1px;
right:-2px;
border-radius:0px 0px 3px 3px;
background:rgb(30,114,41);
}
#searchButton :hover{
background:rgba(0,0,0,0.3);
}
#searchButton a{
text-decoration:none;
font-size:13px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
text-align:center;
color:white;
padding:0;
margin:0;
display:block;
height:100%;
width:100%;
}

.searchBox p{
position:absolute;
border-bottom:1px solid rgba(255,255,255,0.3);
border-radius:2px;
box-shadow:0 1px 2px 2px #1F0000;
-moz-box-shadow:0 1px 2px 2px #1F0000;
-webkit-box-shadow:0 1px 2px 2px #1F0000;
border-top:none;
background:rgba(0,0,0,0.2);
width:200px;
height:50px;
top:0;
right:0;
margin:0;
display:none;
font-size:15px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
color:white;
}

</style>
<script type = "text/javascript">
function popUp(menu){
    var searchBox = document.getElementById(menu).style;
    var searcButton = document.getElementById('searchButton').style;
    if(searchBox.display == "none"){
        searchBox.display = "block";
        searchButton.top = 0 + "px";
        }
    else{
        searchBox.display = "none";
        searchButton.top = 51 + "px";
        }

};
</script>

</head>
<body>
<div class = "searchBox">
    <p id = "paragraph"><input type = "text" name = "serachBar"/>
    <input type = "button" value = "szukaj" name = "search"/>
    </p>
    <div id = "searchButton"><a href = "#"      onclick="popUp('paragraph')">Szukaj</a></div>
</div>

</body>

</html>

Answer 1

错字！：searcButton vs searchButton

工作示例：http://jsfiddle.net/CNjcP/2/

无法使用javascript更改顶级属性

1 个答案: