Dom自定义属性操作

基础JavaScript

Dom文档对象模型

4.7 自定义属性操作

4.71 获取属性值

  • element.getAttribute(‘属性’)

image-20230301145835762

4.72 设置属性值

  • element.setAttribute(‘属性’, ‘值’)
    image-20230301145904861

4.73 移除属性值

  • removeAttribute(‘属性’)

image-20230301145954817

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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));

        // 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class 不是className
        
        // 3 移除属性 removeAttribute('属性')    
        div.removeAttribute('index');
    </script>
</body>

</html>

4.74 tab栏案例

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .tab {
            margin: 200px auto;
            width: 600px;
        }

        .tab_list {
            height: 40px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        ul {
            list-style: none;
        }

        li {
            float: left;
            cursor: pointer;
            text-align: center;
            line-height: 40px;
            padding: 0 20px;
        }

        .active {
            background-color: #c81623;
            color: #fff;
        }

        .item {
            display: none;
        }

        .model {
            width: 100%;
            height: 200px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="active">模块01</li>
                <li>模块02</li>
                <li>模块03</li>
                <li>模块04</li>
                <li>模块05</li>
            </ul>
        </div>
        <div class="tab_content">
            <div class="item model" style="display: block;background-color: skyblue;">模块01</div>
            <div class="item model">模块02</div>
            <div class="item model">模块03</div>
            <div class="item model">模块04</div>
            <div class="item model">模块05</div>
        </div>
    </div>
    <script>
        // 获取元素
        var choice= document.querySelector('ul').children
        var item = document.querySelectorAll('.item')

        for (var i = 0; i < choice.length; i++) {
            // 一始给5个小li 设置索引号 
            choice[i].setAttribute('index', i)

            choice[i].onclick = function () {
                // 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式

                // 干掉所有人 其余的li清除 class 这个类
                for (var i = 0; i < choice.length; i++) {
                    choice[i].className = ' '
                }
                // 留下我自己 
                this.className = 'active'

                // 2. 下面的显示内容模块
                // 2.0 随机颜色函数
                function color() {
                    var arrNum = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
                    var newArr = arrNum.join('');//数组转换字符串
                    var str = '#'; //#号
                    for (var i = 0; i < 6; i++) {
                        var j = Math.floor(Math.random() * arrNum.length);
                        str += newArr[j]
                    }
                    return str
                }

                // 2.1 上的模块选项卡，点击某一个就获得当前点击li选项卡的index索引号
                var index = this.getAttribute('index')
                // 2.11 遍历获得所有item选项内容
                for (var i = 0; i < item.length; i++) {
                    // 2.12 所有item选项内容不显示
                    item[i].style.display = 'none'
                }
                // 2.2 当前点击li选项卡生效显示
                item[index].style.backgroundColor=color()
                item[index].style.display = 'block'
            }
        }
    </script>
</body>

</html>

4.75 H5自定义属性

image-20230301150729866

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div getTime="20" data-index="1"  data-list-name="solar"></div>
    <!-- 
        自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

        自定义属性获取是通过getAttribute(‘属性’) 获取。

        但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性
     -->
    <script>
        var div=document.querySelector('div')
        // console.log(div.getTime);自定义属性访问不到
        console.log(div.getAttribute('getTime'));
        console.log(div.getAttribute('data-index'));
        div.setAttribute('data-time', 2020)
        console.log(div.getAttribute('data-time'));
        console.log(div.getAttribute('data-list-name'));



        // h5新增获取自定义属性的方法
        // dataset是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.time);
        console.log(div.dataset['index']);
        // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);


        // getAttribute:获取的是不以data开头的自定义属性，没有兼容问题
        // dataset:获取的是以data开头的自定义属性，只兼容ie 11以上的版本
        
    </script>
</body>
</html>

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~