JS3-自定义属性、索引值全解.docx

JS3-自定义属性、索引值自定义属性、自定义一组开关应用-11.1自定义属性的概念元素自身上面没有的属性称之为自定义属性。例如input type=button abc=123456 / 表单是没有abc这个属性的1.2往元素中添加自定义属性Window.onload=function(){VaroBtn=document.getElementsByTagName(‘input’);oBtn[0].abc=123;//往button按钮中添加属性abcalert(oBtn[0].abc);//123oBtn[0].abc = 456; //覆盖原先自定义属性的值}1.3循环往元素中添加自定义属性input type=button value=按钮1 /input type=button value=按钮2 /input type=button value=按钮3 /for(var i=0; iaBtn.length; i++ ){aBtn[i].abc = 123;aBtn[i].xyz = true;}1.4自定义一组开关的应用!DOCTYPE HTMLhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8title无标题文档/titlestyleli {list-style: none;width: 114px;height: 140px;background: url(img/normal.png);float: left;margin-right: 20px;}/stylescriptwindow.onload = function() {varaLi = document.getElementsByTagName(li);// varonOff = true;// 只能控制一组！for(var i = 0; i aLi.length; i++) {aLi[i].onOff = true;aLi[i].onclick = function() {// alert(this.style.background );// 背景不能判断// color red #f00 // 相对路径if(this.onOff) {this.style.background = url(img/active.png);this.onOff = false;} else {this.style.background = url(img/normal.png);this.onOff = true;}};}};/script/headbodyulli/lili/lili/li/ul/body/html效果如图所示：2-获取自身递增数字及匹配数组内容-2!DOCTYPEhtmlhtmlheadmetacharset=UTF-8title/title/headbodyinput type=button value=0 /input type=button value=0 /input type=button value=0 /script type=text/javascriptwindow.onload= function() {varaBtn= document.getElementsByTagName(input); //获取所有的button元素vararr= [A, B, C, D]; //定义一个数组用来存放A，B，C,D四个元素for(vari = 0; i aBtn.length; i++) {aBtn[i].num= 0;aBtn[i].onclick= function() {// alert(arr[ this.num ] );this.value= arr[this.num];this.num++;if(this.num=== arr.length) {this.num= 0;}};}}/script/body/html显示效果如图所示3-添加索引值、匹配数组、HTML元素-33.1添加索引值!DOCTYPE HTMLhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8title无标题文档/titlescriptwindow.onload = function() {varaBtn = document.getElementsByTagName(input);for(var i = 0; i aBtn.length; i++) {aBtn[i].index = i; // 自定义属性（索引值）aBtn[i].onclick = function() {/