js 自定义属性

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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>

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

猜你喜欢

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