html dom相簿優化（一）
阿新 • • 發佈：2018-12-26
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <ul id="uls"> <li> <a href="img/a.jpg" title="a">a</a> </li> <li> <a href="img/b.jpg" title="b">b</a> </li> <li> <a href="img/c.png" title="c">c</a> </li> <li> <a href="img/d.png" title="d">d</a> </li> <li> <a href="img/e.png" title="e">e</a> </li> </ul> <img src="" id="pic" alt="請選擇連結" width="600px" height="500px"/> <p id="des">圖片標題</p> <script type="text/javascript"> //新增載入完成繫結事件 function addLoadEvent(func) { var Old=window.onload; if(typeof window.onload !='function') { window.onload=func; } else { window.onload=function() { Old(); func(); } } } addLoadEvent(prePic); function prePic() { if(!document.getElementById) { return false; } if(!document.getElementsByTagName) { return false; } if(!document.getElementById("uls")) { return false; } var ulNode=document.getElementById("uls"); var link=ulNode.getElementsByTagName("a"); for(var i=0;i<link.length;i++) { link[i].onclick=function() { if(showPic(this)) { window.event.returnValue=false; } } } } function showPic(node) { if(!document.getElementById("pic")) { return false; } var src=node.getAttribute("href"); var imgNode=document.getElementById("pic"); imgNode.setAttribute("src",src); if(document.getElementById("des")) { var text=node.getAttribute("title"); var desNode=document.getElementById("des"); desNode.firstChild.nodeValue=text; } return true; } </script> </body> </html>