JS3自定义属性索引值解析.docx

JS3自定义属性索引值解析.docx

《JS3自定义属性索引值解析.docx》由会员分享，可在线阅读，更多相关《JS3自定义属性索引值解析.docx（18页珍藏版）》请在冰豆网上搜索。

JS3自定义属性索引值解析

JS3-自定义属性、索引值

1-自定义属性、自定义一组开关应用-1

1.1自定义属性的概念

元素自身上面没有的属性称之为自定义属性。

例如

表单是没有abc这个属性的

1.2往元素中添加自定义属性

Window.onload=function（）{

VaroBtn=document.getElementsByTagName（‘input’）;

oBtn[0].abc=123;//往button按钮中添加属性abc

alert（oBtn[0].abc）;//123

oBtn[0].abc=456;//覆盖原先自定义属性的值

}

1.3循环往元素中添加自定义属性

for（vari=0;i

aBtn[i].abc=123;

aBtn[i].xyz=true;

}

1.4自定义一组开关的应用

DOCTYPEHTML>

效果如图所示：

2-获取自身递增数字及匹配数组内容-2

DOCTYPEhtml>

window.onload=function（）{

varaBtn=document.getElementsByTagName（'input'）;//获取所有的button元素

vararr=['A','B','C','D'];//定义一个数组用来存放A，B，C,D四个元素

for（vari=0;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;

}

};

}

}

显示效果如图所示

3-添加索引值、匹配数组、HTML元素-3

3.1添加索引值

DOCTYPEHTML>

3.2匹配数组

DOCTYPEHTML>

3.3建立匹配对应关系用索引

DOCTYPEHTML>

a

b

c

4-图片切换综合实例

（1）

DOCTYPEHTML>

数量正在加载中……

文字说明正在加载中……