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>
自己看了半天都沒有找出來錯誤在哪里???
2016-08-30
有沒有完整的代碼資源,可以給一個鏈接地址嗎?
2016-06-24
我居然還看了一會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呢?沒寫你就設置樣式了......
2016-05-14
自已alert一下訪問style屬性的那個元素,那個元素實際上取的是空值,可能是你函數封裝沒封裝好或者獲取的時候獲取了一個不存在的元素,代碼太長就懶得看了OTZ