javascript:DOM自定义属性的妙用

虽然HTML元素的属性已经十分丰富，但在某些场合下，元素固有的属性无法完成我们的需求；

这个时候，自定义属性就会让问题解决起来比较方便。

比如，下面的栗子：

多张图片点击变化事件：当背景图片为a.jpg时，点击图片时，切换成b.jpg;

javascript:DOM自定义属性的妙用

HTML：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>自定义属性</title>

	<style type="text/css">

    li{

    	list-style: none;

    	float: left;

    	width: 120px;

    	height: 120px;

    	background: url(a.jpg) no-repeat;

    	background-size: contain;

    }

	</style>

</head>

<body>

<ul>

	<li></li>

	<li></li>

	<li></li>

</ul>

</body>

</html>

因为以下条件不能作为判断条件：

背景图片无法作为判断条件：所以，通过if(this.style.background==='url(a.jpg)'){this.style.background='url(b.jpg)'}这种方法无法实现；
颜色值的表达方式多样，如（red,#333,#f7f7f7），同样无法作为判断条件;(知识补充)
相对路径无法作为判断条件，如(img/a.jpg)。(知识补充)

此时，一般的判断条件不靠谱，所以，用自定义属性的方法显得格外简洁，高效。

思路：

aLi[i].onOff=true;

给每一组li元素添加一个开关属性onOff，并设置默认值为：true；

所以，aLi[i].onOff=true;时候，背景图片默认为a.jpg;

然后，通过更改onOff的值，当 onOff=false时候，背景图片设置为:b.jpg.

DEMO演示地址：http://codepen.io/anon/pen/Wvwmga

JAVASCRIPT:

var aLi=document.getElementsByTagName('li');

for(var i=0;i<aLi.length;i++){

	aLi[i].onOff=true;

	//自定义属性，为每一个li元素添加一个onOff开关，默认值为true；

	aLi[i].onclick=function(){

       if (this.onOff) {

       	this.style.cssText='background:url(b.jpg) no-repeat;background-size:contain;';

       	this.onOff=false;

       }else{

       	this.style.cssText='background:url(a.jpg) no-repeat;background-size:contain;';

       	this.onOff=true;

       }

	}

}

秒客网

javascript:DOM自定义属性的妙用

相关文章