undefined

自定义属性

发表于 | 分类于 ，
字数统计: 1,494 | 阅读时长 ≈ 8

什么是自定义属性

通俗地讲，就是js往html上添加东西。js可以为任何html元素添加任意个自定义属性。例如下面程序的abc、xyz就是自定义属性 

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
<!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');
       
        for (var i = 0; i < aBtn.length; i++) {
            aBtn[i].abc = 123;
            aBtn[i].xyz = true;
        }
         alert(aBtn[0].abc);
    };
    </script>
</head>

<body>
    <input type="button" value="按钮1" />
    <input type="button" value="按钮2" />
    <input type="button" value="按钮3" />
</body>

</html>

应用1:自定义一组开关应用

注意不能当作判断条件的有1、背景不能判断 2、color不能判断 3、相对路径不能当作判断条件 

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE 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 );
           

                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>

应用2：获取自身递增数字及匹配数组内容

相当于一个按钮就可以 控制一组东西的变化 

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
34
35
36
<!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 = ['A', 'B', 'C', 'D'];

        for (var i = 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>
</head>

<body>
    <input type="button" value="0" />
    <input type="button" value="0" />
    <input type="button" value="0" />
</body>

</html>

应用3：添加索引值、匹配数组

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
<!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');

        for (var i = 0; i < aBtn.length; i++) {

            aBtn[i].index = i; // 自定义属性（索引值）

            aBtn[i].onclick = function() {

                // alert( i );			
                alert(this.index); //添加索引值，自定义索引值

            };
        }
    };
    </script>
</head>

<body>
    <input type="button" value="btn1" />
    <input type="button" value="btn2" />
    <input type="button" value="btn3" />
</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>

通过索引将按钮和P匹配

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
34
35
36
37
38
<!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 aP = document.getElementsByTagName('p');

        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];

                aP[this.index].innerHTML = arr[this.index];
            };
        }
    };
    </script>
</head>

<body>
    <input type="button" value="btn1" />
    <input type="button" value="btn2" />
    <input type="button" value="btn3" />
    <p>a</p>
    <p>b</p>
    <p>c</p>
</body>

</html>  hexo

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!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 .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 oldLi = null;

        for (var i = 0; i < arrUrl.length; i++) {
            oUl.innerHTML += '<li></li>';
        }
        oldLi = aLi[num];

        // 初始化
        oImg.src = arrUrl[num];
        oSpan.innerHTML = 1 + num + ' / ' + arrUrl.length;
        oP.innerHTML = arrText[num];
        aLi[num].className = 'active';

        for (var i = 0; i < aLi.length; 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;

                /*
                	<li class="active"></li>
                	<li></li>
                	<li></li>
                	<li></li>
                */

                // 思路一：全部清空，当前添加
                for (var i = 0; i < aLi.length; i++) {
                    aLi[i].className = '';
                }
                this.className = 'active';

                /*
                // 思路二：清空上个，当前添加
                oldLi.className = '';
                oldLi = this;
                this.className = 'active';
                */
            };
        }
    };
    </script>
</head>

<body>
    <div id="pic">
        <img src="" />
        <span>数量正在加载中……</span>
        <p>文字说明正在加载中……</p>
        <ul></ul>
    </div>
</body>

</html>
觉得本站不错，请作者吃根辣条
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多