Uncaught TypeError: Cannot read property 'style' of null, 是什么情况？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了兼容IE -->
<title>js实现搜索框下拉功能</title>
<style type="text/css">
body, ul, li, div, form,input{margin:0; padding:0;}
body{background-color: #333;}
.bg_div{
background-image: url(images/river.jpg);
width:1366px; height:690px;
margin:0 auto;
position: relative;
}
.logo{
background-image: url(images/logo.png);
width:107px; height: 53px;
float: left;
margin-right: 15px;
margin-top: -10px; /*设置负值往反方向移动*/
}
form{
float: left;
background-color: #fff;
}
input{
border: 0;
outline:none;/*去掉chrome下点击输入框时高亮颜色*/
}
.search_input_text{
width: 350px;
height: 38px;
line-height: 38px;
float: left;
padding: 0 5px;
}
.search_input_button{
background: url(images/search_button.png) center center no-repeat;
width: 38px;
height: 38px;
line-height: 38px;
float: left;
cursor: pointer; /*光标移到按钮时变为“小手”形状*/
}
.search_box{
position: absolute;
top: 200px;
left: 200px;
}
.suggest ul{
width: 396px;
border: 1px solid #999;
background: #fff;
position: absolute;
top: 238px;
left: 322px;
}
.suggest li{
padding: 3px;
list-style-type: none;
line-height: 25px;
}
.suggest li:hover{
text-decoration: underline;
background-color: #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div>
<div></div>
<form id="search_form" >
<input type="text" id="search_input" />
<input type="submit" value="" />
</form>
</div>
<div id="search_suggest" style="display: none;">
<ul id="search_result">
<li>搜索结果1</li>
<li>搜索结果2</li>
<li>搜索结果3</li>
</ul>
</div>
</div>
<script type="text/javascript">
// 先封装几个常用的函数
var getDOM = function (id) {
return document.getElementById('id');
};
var addEvent = function (id, event, fn) {
var el = getDOM(id)||document;
if(el.addEventListener){//非IE浏览器
el.addEventListener(event, fn, false);
}else if(el.attachEvent){//IE浏览器
el.attachEvent('on'+event, fn);
}
};
// 获取输入框的位置
var getElementLeft = function(element) {//获取距离浏览器左边的距离
var actualLeft = element.offsetLeft;//获取距离父元素左边的距离
var current = element.offsetParent;
while(current!== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
};
var getElementTop = function(element) {//获取距离浏览器顶部的距离
var actualTop = element.offsetTop;
var current = element.offsetParent;
while(current!== null){
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
};//至此已封装完毕
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.position = 'absolute';
getDOM('search_suggest').style.display = 'block';
});
</script>
</body>
</html>自己看了半天都没有找出来错误在哪里啊？
