求助，我的代码怎么回事，为什么为什么在函数里面取不到getDom("search-suggest").style.left不正确
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>bing search</title>
<style type="text/css">
*{margin: 0;padding: 0}
body{background-color: #333;}
.bg-div{position:relative;background-image: url(river.jpg);width:1228px;height:690px;margin: 0 auto;}
.logo{background-image: url(logo.png);height:53px;width: 107px; float: left;margin: -4px 18px 0 0;}
.search-form{float: left; background-color: #fff;padding:5px;}
.search-text{height:25px;line-height: 25px;float: left;width: 350px;border: 0;outline: none;}
.search-button{background-image: url(search-button.png);width:29px;height:29px;float: left;border: 0;}
.search-box{position:absolute;top:150px;left: 200px; }
.suggest{width: 388px;border: 1px solid #999;background-color: #fff;position: absolute;}
.suggest ul{list-style: none;}
.suggest ul li{line-height: 25px;padding: 3px;font-size: 14px;cursor: pointer;}
.suggest ul li:hover{background-color: #e5e5e5;text-decoration: underline;}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form class="search-form" action="https://cn.bing.com/search" target="_blank" id="search-form">
<input type="text" class="search-text" name="q" id="search-input" />
<input type="submit" class="search-button" value="" id="search-button" />
</form>
</div>
</div>
<div class="suggest" id="search-suggest" style="display: none;">
<ul id="search-result">
<li>hah</li>
<li>hah</li>
<li>hah</li>
<li>hah</li>
<li>hah</li>
<li>hah</li>
</ul>
</div>
<script type="text/javascript">
// $("#search-input").on("keyup",function(){
// var searchText = $("#search-input").val();
// $.get('http://api.bing.com/qsonhs.aspx?q='+searchText,function(d){
// var d=d.AS.Results[0].suggests;
// var html='';
// d.each(function(index,result){
// html+='<li>'+result.Txt+'</li>';
// $("#search-result").html(html);
// $("#search-suggest").show().css({
// top:$("#search-form").offset().top+$("#search-form").outerHeight(),
// left:$("#search-form").offset().left
// })
// })
// },"json");
// })
// $(document).on("click",function(){
// $("#search-suggest").hide()
// })
// $(document).on("click","li",function(){
// var keyword=$(this).text();
// location.href='http://api.bing.com/search?q='+keyword;
// })
//获得id元素
var getDom=function(id){
return document.getElementById(id);
}
//给id元素绑定事件
var addEvent=function(id,event,fn){
var elem=getDom(id)||document;
if(elem.addEventListener){
elem.addEventListener(event,fn,false);
}else if(elem.attachEvent){
elem.attachEvent("on"+event,fn);
}else{
elem["on"+event,fn];
}
}
var getElementLeft=function(elem){
var actuallf=elem.offsetLeft;
var parentelem=elem.offsetParent;
if(parentelem!=null){
actuallf+=parentelem.offsetLeft;
parentelem=parentelem.offsetParent;
}
return actuallf;
}
var getElementTop=function(elem){
var actualtp=elem.offsetTop;
var parentelem=elem.offsetParent;
if(parentelem!=null){
actualtp+=parentelem.offsetTop;
parentelem=parentelem.offsetParent;
}
return actualtp;
}
// window.onload=function(){
// }
window.onload=function(){
addEvent("search-input","keyup",function(){
getDom("search-suggest").style.top=getElementTop(getDom("search-form"))+38+"px";
getDom("search-suggest").style.left=getElementLeft(getDom("search-form"))+"px";
getDom('search-suggest').style.display = 'block';
})
}
</script>
</body>
</html>
