虽然HTML元素的属性已经十分丰富,但在某些场合下,元素固有的属性无法完成我们的需求;
这个时候,自定义属性就会让问题解决起来比较方便。
比如,下面的栗子:
多张图片点击变化事件:当背景图片为a.jpg时,点击图片时,切换成b.jpg;
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].οnclick=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;
}
}
}