js 自定义属性

来源：互联网发布：尘埃落定知乎编辑：程序博客网时间：2024/05/21 01:56

JS 可以为任何HTML元素添加任意个自定义属性

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>li { list-style:none; width:114px; height:140px; background:url(img/normal.png); float:left; margin-right:20px; }</style><script>window.onload = function (){    var aLi = document.getElementsByTagName('li');    // var onOff = 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></head> <body> <ul>    <li></li>    <li></li>    <li></li></ul> </body></html>

123456789101112131415161718192021222324252627282930313233<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>window.onload = function (){    var aBtn = document.getElementsByTagName('input');         // 想建立“匹配”“对应”关系，就用索引值    var arr = [ '莫涛', '张森', '杜鹏' ];         for( var i=0; i<aBtn.length; i++ ){                 aBtn[i].index = i;          // 自定义属性（索引值）                 aBtn[i].onclick = function (){            // alert( arr[ this.index ] );            this.value = arr[ this.index ];        };    }};</script></head> <body> <input type="button" value="btn1" /><input type="button" value="btn2" /><input type="button" value="btn3" /> </body></html>

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>ul { padding:0; margin:0; }li { list-style:none; }body { background:#333; }#pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; }#pic img { width:400px; height:500px; }#pic ul { width:40px; position:absolute; top:0; right:-50px; }#pic li { width:40px; height:40px; margin-bottom:4px; /*background:#666;*/ }#pic li img{width:40px; height:40px; margin-bottom:4px;}.ac{box-shadow: 0 0 10px  2px orange;}#pic .active { background:#FC3; }#pic span { top:0; }#pic p { bottom:0; margin:0; }#pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }</style><script>window.onload = function (){var oDiv = document.getElementById('pic');var oImg = oDiv.getElementsByTagName('img')[0];var oSpan = oDiv.getElementsByTagName('span')[0];var oP = oDiv.getElementsByTagName('p')[0];var oUl = oDiv.getElementsByTagName('ul')[0];var aLi = oUl.getElementsByTagName('li');var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];var arrText = [ '小宠物', '图片二', '图片三', '面具' ];var num = 0;var oli=null;for( var i=0; i<arrUrl.length; i++ ){oUl.innerHTML += '<li><img src=""/></li>';}oli=aLi[num];// 初始化function fnTab(){for( var i=0; i<aLi.length; i++ ){var aim=aLi[i].getElementsByTagName("img")[0];aim.src=arrUrl[i];}oImg.src = arrUrl[num];oSpan.innerHTML = 1+num+' / '+arrUrl.length;oP.innerHTML = arrText[num];//for( var i=0; i<aLi.length; i++ ){//aLi[i].className = '';//}aLi[num].className = 'ac';//     aim.src=arrUrl[num];}fnTab();for( var i=0; i<aLi.length; i++ ){aLi[i].index = i;// 索引值aLi[i].onclick = function (){num = this.index;fnTab();      oli.className="";      oli=this;      this.className="ac";};}};</script></head><body><div id="pic"><img src="" />  <span>数量正在加载中……</span>  <p>文字说明正在加载中……</p>  <ul></ul></div></body></html>

阅读全文

0 0

js 自定义属性

JS 可以为任何HTML元素添加任意个 自定义属性

JS 可以为任何HTML元素添加任意个自定义属性