JS3自定义属性索引值解析.docx
- 文档编号:3027370
- 上传时间:2023-05-05
- 格式:DOCX
- 页数:18
- 大小:473.79KB
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>
li{
list-style:
none;
width:
114px;
height:
140px;
background:
url(img/normal.png);
float:
left;
margin-right:
20px;
}
window.onload=function(){
varaLi=document.getElementsByTagName('li');
//varonOff=true;//只能控制一组!
for(vari=0;i aLi[i].onOff=true; aLi[i].onclick=function(){ //alert(this.style.background); //背景不能判断 //colorred#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; } }; } };
效果如图所示:
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>
window.onload=function(){
varaBtn=document.getElementsByTagName('input');
for(vari=0;i aBtn[i].index=i;//自定义属性(索引值) aBtn[i].onclick=function(){ //alert(i);//3 alert(this.index); }; } };
3.2匹配数组
DOCTYPEHTML>
window.onload=function(){
varaBtn=document.getElementsByTagName('input');
//想建立“匹配”“对应”关系,就用索引值
vararr=['莫涛','张森','杜鹏'];
for(vari=0;i aBtn[i].index=i;//自定义属性(索引值) aBtn[i].onclick=function(){ //alert(arr[this.index]); this.value=arr[this.index]; }; } };
3.3建立匹配对应关系用索引
DOCTYPEHTML>
window.onload=function(){
varaBtn=document.getElementsByTagName('input');
varaP=document.getElementsByTagName('p');
//想建立“匹配”“对应”关系,就用索引值
vararr=['莫涛','张森','杜鹏'];
for(vari=0;i aBtn[i].index=i;//自定义属性(索引值) aBtn[i].onclick=function(){ //alert(arr[this.index]); this.value=arr[this.index]; aP[this.index].innerHTML=arr[this.index]; }; } };
a
b
c
4-图片切换综合实例
(1)
DOCTYPEHTML>
ul{padding:
0;margin:
0}
li{list-style:
none}
body{background:
#333}
#pic{width:
400px;height:
500px;position:
relative;margin:
0auto;background:
url(img/loader_ico.gif)no-repeatcenter#fff}
#picimg{width:
400px;height:
500px}
#picul{width:
40px;position:
absolute;top:
0;right:
-50px}
#picli{width:
40px;height:
40px;margin-bottom:
4px;background:
#666}
#pic.active{background:
#FC3}
#picspan{top:
0}
#picp{bottom:
0;margin:
0}
#picp,#picspan{position:
absolute;left:
0;width:
400px;height:
30px;line-height:
30px;text-align:
center;color:
#fff;background:
#000}
window.onload=function(){
varoDiv=document.getElementById('pic');
varoImg=oDiv.getElementsByTagName('img')[0];
varoSpan=oDiv.getElementsByTagName('span')[0];
varoP=oDiv.getElementsByTagName('p')[0];
varoUl=oDiv.getElementsByTagName('ul')[0];
varaLi=oUl.getElementsByTagName('li');
vararrUrl=['img/1.png','img/2.png','img/3.png','img/4.png'];
vararrText=['小宠物','图片二','图片三','面具'];
varnum=0;
varoldLi=null;
for(vari=0;i oUl.innerHTML+='
}
oldLi=aLi[num];
//初始化
oImg.src=arrUrl[num];
oSpan.innerHTML=1+num+'/'+arrUrl.length;
oP.innerHTML=arrText[num];
aLi[num].className='active';
for(vari=0;i aLi[i].index=i;//索引值 aLi[i].onclick=function(){ oImg.src=arrUrl[this.index]; oP.innerHTML=arrText[this.index]; oSpan.innerHTML=1+this.index+'/'+arrText.length; /*
*/
//思路一:
全部清空,当前添加
for(vari=0;i aLi[i].className=''; } this.className='active'; /* //思路二: 清空上个,当前添加 oldLi.className=''; oldLi=this; this.className='active'; */ }; } };
数量正在加载中……
文字说明正在加载中……
5-图片切换综合实例
(2)
DOCTYPEHTML>
ul{padding:
0;margin:
0;}
li{list-style:
none;}
body{background:
#333;}
#pic{width:
400px;height:
500px;position:
relative;margin:
0auto;background:
url(img/loader_ico.gif)no-repeatcenter#fff;}
#picimg{width:
400px;height:
500px;}
#picul{width:
40px;position:
absolute;top:
0;right:
-50px;}
#picli{width:
40px;height:
40px;margin-bottom:
4px;background:
#666;}
#pic.active{background:
#FC3;}
#picspan{top:
0;}
#picp{bottom:
0;margin:
0;}
#picp,#picspan{position:
absolute;left:
0;width:
400px;height:
30px;line-height:
30px;text-align:
center;color:
#fff;background:
#000;}
数量正在加载中……
文字说明正在加载中……
显示效果图如下
6-QQ列表展示
DOCTYPEHTML>
ul,h2{padding:
0;margin:
0;}
li{list-style:
none;}
#list{width:
240px;border:
1pxsolid#333;margin:
0auto;}
#list.lis{}
#listh2{height:
30px;line-height:
30px;text-indent:
20px;background:
url(img/ico1.gif)no-repeat5pxcenter#6FF;color:
#000;}
#list.active{background:
url(img/ico2.gif)no-repeat5pxcenter#FF9;color:
#000;}
#listul{display:
none;}
#listulli{line-height:
24px;border-bottom:
1pxsolid#333;text-indent:
24px;}
#listul.hover{background:
#6FF;}
window.onload=function(){
varoUl=document.getElementById('list');
varaH2=oUl.getElementsByTagName('h2');
varaUl=oUl.getElementsByTagName('ul');
varaLi=null;
vararrLi=[];
for(vari=0;i aH2[i].index=i; aH2[i].onclick=function(){ for(vari=0;i if(i! =this.index){ aUl[i].style.display='none'; aH2[i].className=''; } } if(this.className==''){ aUl[this.index].style.display='block'; this.className='active'; }else{ aUl[this.index].st
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JS3 自定义 属性 索引 解析