亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

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>

自己看了半天都沒有找出來錯誤在哪里???

正在回答

3 回答

有沒有完整的代碼資源,可以給一個鏈接地址嗎?

0 回復 有任何疑惑可以回復我~

我居然還看了一會JS

<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>

你結構上的class呢?沒寫你就設置樣式了......

0 回復 有任何疑惑可以回復我~
#1

慕瓜3177915

啥意思 沒懂
2016-09-21 回復 有任何疑惑可以回復我~

自已alert一下訪問style屬性的那個元素,那個元素實際上取的是空值,可能是你函數封裝沒封裝好或者獲取的時候獲取了一個不存在的元素,代碼太長就懶得看了OTZ

1 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
搜索框制作
  • 參與學習       66022    人
  • 解答問題       463    個

本課程從簡入深講解搜索框的制作,學習JQ與JS實現Ajax技術的不同點

進入課程

Uncaught TypeError: Cannot read property 'style' of null, 是什么情況?

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號