最近在学习JavaScript DOM编程艺术，跟着学习把里面的一个demo 敲了，demo 是小玩意，但是在编程习惯上给了我很大的启发。
考虑“平稳退化”：如果浏览器不支持或者禁用js之后，依旧保证网页的可用性。
将javascript 分离，js负责用户行为，借鉴css样式与内容分离思路，将js与结构和内容分离开来，增强网页的健壮性。
下面直接show code:思路是点击a标签存放图片与事件，img显示图片,通过点击a标签，触发时间，js将img图片切换成点击的a标签的图片。
HTML+css
<style type="text/css">
body{padding: 0px;margin: 0px;}
li{list-style: none; float: left;margin: 10px; }
a{text-decoration: none; color: chartreuse;}
p{color: blue;font: "微软雅黑" 20px;margin-left: -425px;}
img{padding-top: 50px;}
li:nth-child(6){border: 5px solid cadetblue;}
</style>
<body>
<ul id="liId">
<li>
<a href="img/01.jpg" title="天堂未必在前方，但地狱一定在身后" >努力</a>
</li>
<li>
<a href="img/02.jpg" title="逝者如斯夫，不舍昼夜">时间</a>
</li>
<li>
<a href="img/03.jpg" title="学如逆水行舟，不进则退" >学习</a>
</li>
<li>
<a href="img/04.jpg" title="珍惜眼前，活在当下" >珍惜</a>
</li>
<li>
<a href="img/05.jpg" title="拿出你的激情" >热爱</a>
</li>
<li><img src="img/06.jpg" id="place" alt="显示图片" style=" 600px;height: 600px;border: 1px solid gray;" /></li>
<li><p id="des">this is a demo about img change</p></li>
</ul>
<script type="text/javascript" src="js/test.js"></script>
</body>
JS:
window.onload=function(){//页面加载完后执行
check();
}
function check(){
if(!document.getElementById||!document.getElementsByName) return false;//判断浏览器是否支持DOM
if(!document.getElementById("liId"))return false;//判断id值是否存在
var gallry=document.getElementById("liId");
var links=gallry.getElementsByTagName("a");
for (var i=0;i<links.length;i++) {
links[i].onclick=function(){ //js行为与html结构分离
return showPic(this)?false:true;
}
}
}
function showPic(wichPic){
if(!document.getElementById("place"))return false;
var source=wichPic.getAttribute("href");//获取href
var place=document.getElementById("place");//获取图片id
place.setAttribute("src",source);//替换
if(document.getElementById("des")){
var text=wichPic.getAttribute("title")?wichPic.getAttribute("title"):" ";
var descrip=document.getElementById("des");
descrip.firstChild.nodeValue=text;
return true;
}
}
展示地址：http://runjs.cn/detail/gdmj7rkc