JS自定义属性应用体会

问题：JS自定义属性的应用

应用场景：通过一个连接实现当鼠标停留在链接上时，对应的一个图片实现变化，当鼠标离开链接时，又恢复到之前的图片状态

分析：起初想简单的通过onmouseover和onmouseout来实现这样一个效果

window.onload = rollOverInit;

//通过连接改变图片的状态
function rollOverInit(){
var links = document.links;
for(var i=0; i<links.length; i++){
   //通过link找img
var objLink = links[i];
if(objLink.id){
//找到对应的img
var objImg = document.getElementById(objLink.id+"Img");
if(objImg){
var imgObj = document.getElementById("button1");
//通过哪个链接改变那张图
rollImage(objLink,objImg);
}
}
}
}

方法一：直接设置objImg属性，比较直接

function rollImage(objLink,objImg){
//当鼠标移开链接，恢复图片
objLink.onmouseout=function(){
objImg.src = "./images/arrow_off.gif";
}
//当鼠标放在链接上，改变图片
objLink.onmouseover = function(){
objImg.src = "./images/arrow_on.gif";
}

方法二、给objLink定义一个JS自定义属性imageTochange，来指向imageObj将要显示的图片

function rollImage(objLink,objImg){

        //这一步至关重要，意思就是通过objLink来改变哪个img
objLink.Imgtochange = objImg;

objLink.onmouseout=function(){
this.Imgtochange.src = this.outImage.src;
}

objLink.onmouseover = function(){
this.Imgtochange.src = this.overImage.src;
}

objLink.outImg = new Image();
objLink.outImg.src = objImg.src;

objLink.overImg = new Image();
objLink.overImg.src = "./images/" + objLink.id +"_on.gif";
}

加上一个JS自定义属性，整个代码显得更加形象了，而且更加通用了

有时候，两段代码都能够实现一个功能，究竟哪个更好呢，那当然是那些易于阅读，重用性强的代码更加的强悍

同时这个JS还需要图片命名规则以及ID命名规则的巧妙配合才能够实现，这样一个小小的案例给我的启发着实不少，我们在编写代码时加一个巧字在上面，代码就显得更加的灵活有趣。  呵呵、、、