虽然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>

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

  1. 背景图片无法作为判断条件：所以，通过if(this.style.background==='url(a.jpg)'){this.style.background='url(b.jpg)'}这种方法无法实现；
  2. 颜色值的表达方式多样，如（red,#333,#f7f7f7），同样无法作为判断条件;(知识补充)
  3. 相对路径无法作为判断条件，如(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自定义属性的妙用的更多相关文章

  1. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  2. JavaScript DOM 对象

    JavaScript DOM 对象   什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...

  3. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

  4. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  5. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  6. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  7. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  8. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  9. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

随机推荐

  1. 利用JasperReport+iReport进行Web报表开发

    用JasperReport+iReport进行Web报表开发 序言 在非常多实际的项目里,报表都是当中十分重要的组成部分,比如把查询结果以报表的形式呈现出来.这里所提到的报表可不是简单的二维表,而是拥 ...

  2. Oracle 11g新特性invisible index(不可见的索引)

    假设一张表上有十几个索引,你有什么感受?显然会拖慢增.删.改的速度.不要指望开发者能建好索引.我的处理方法是先监控非常长的一段时间.看哪些索引没实用到,然后删除. 但删除以后,假设发现某一天实用,那又 ...

  3. Loadrunner结果分析Graphs

    Transactions(用户事务分析)----用户事务分析是站在用户角度进行的基础性能分析. Transation Sunmmary(事务综述)----对事务进行综合分析是性能分析的第一步,通过分析 ...

  4. [iOS]使用symbolicatecrash分析crash文件

    对于我们iOS开发者来说,最心碎的事莫过于苹果审核一个星期后上架app store,而第二天就报出闪退bug.一周前我刚经历过,而且最坑的是由于第一次做个人开发,经验不足,没有集成友盟的分析SDK,还 ...

  5. QT程序启动界面的使用

    当程序的初始化工作比较多,程序可能启动较长时间后,窗口才会显示出来,用户没准会抱怨程序响应的慢. 为了改善用户体验,最好在程序初始化这段时间显示logo,或者其他信息提示用户程序已启动.QT提供了QS ...

  6. 配置Samba服务

    1. samba服务用在什么地方?samba服务用于把Linux服务器上的文件或者打印接共享给windows或者Linux.2. 在samba服务的配置文件中,[global]配置部分的securit ...

  7. Dialog( 对话框) 组件

    一． 加载方式//class 加载方式<div class="easyui-dialog" title="My Dialog"style="wi ...

  8. (转)jquery.url.js 插件的使用

    jQuery插件之-jQuery URL Parser   jQuery插件Query URL Parser用于解析URLs字符串.通过它我们可以方便地获取协议.主机.端口.查询参数.文件名.路径等等 ...

  9. 武汉科技大学ACM ：1009: 零起点学算法63——弓型矩阵

    Problem Description 输出n*m的弓型矩阵 Input 多组测试数据 每组输入2个整数 n和m(不大于20) Output 输出n*m的弓型矩阵,要求左上角元素是1,(每个元素占2个 ...

  10. IDirect3DDevice9::Clear

    在绘制每一帧图形前都要先清空视区,即清空渲染目标表面上的视区矩形的内容:颜色缓冲区.深度缓冲区或者模板缓冲区. HRESULT Clear(  [in]  DWORD Count,           ...