JavaScript - 操作元素 - 获取自定义属性值_js获取元素自定义属性

作者：笔触狂放9 | 2024-02-19 07:21:26

踩

js获取元素自定义属性

文章目录

一、定义属性的操作
选项卡案例
二、H5自定义属性
- 设置H5自定义属性
- 获取H5自定义属性

一、定义属性的操作

1.获取属性值

element.属性; 获取属性值. : 获取内置属性值 (元素本身自带的属性)
element.getAttribute(‘属性’); : 主要获得自定义的属性

<!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 id="div" index="1"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.id);  // div
        console.log(div.getAttribute('index'));  // 1
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2.设置元素属性值

element.属性 = 值; 修改元素属性值
element.setAttribute('属性', '值'); 修改自定义属性值.

<!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 id="div" index="1"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.id);  // div
        console.log(div.getAttribute('index'));  // 1
        div.id = 'dddd'
        console.log(div.id);  // dddd
        div.setAttribute('index', '2');
        console.log(div.getAttribute('index'));  // 2
    </script>
</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

3. 移除属性

element.removeAttribute('属性');

<!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 id="div" index="1"></div>
    <script>
        var div = document.querySelector('div');
        div.removeAttribute('index');
        console.log(div.getAttribute('index'));  // null
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

选项卡案例

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        a {
            color: black;
        }

        li {
            list-style: none;
        }

        .ETab {
            position: relative;
            width: 990px;
        }

        .box {
            width: 100%;
            height: 50px;
            font-size: 14px;
            /* background-color: #ccc; */
            border-bottom: 1px solid red;
            overflow: hidden;
            margin-bottom: 50px;
        }

        .box .current {
            background-color: red;
            color: #fff;
        }

        .box ul li {
            float: left;
            height: 50px;
            text-align: center;
            padding: 0px 25px;
            line-height: 50px;
        }

        .boxs {
            position: absolute;
            font-size: 12px;
        }

        .box1 ul li {
            width: 50%;
            padding-left: 42px;
        }

        .box ul a:hover {
            color: red;
        }

        .box1 {
            padding-top: 20px;
            margin-top: 50px;
            margin-bottom: 50px;
        }

        .box2 ul li {
            float: left;
            width: 200px;
            padding-left: 42px;
            line-height: 20px;
        }

        .boxs1 {
            position: absolute;
        }

        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="ETab">
        <div class="box">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item boxs" style="display: block;">
                <div class="box1">
                    <ul class="li1">
                        <li>品牌: Apple</li>
                    </ul>
                </div>
                <div class="box2">
                    <ul>
                        <li>商品名称：AppleiPhone 12</li>
                        <li>商品编号：100016034400</li>
                        <li>商品毛重：350.00g</li>
                        <li>CPU型号：其他</li>
                        <li>运行内存：其他</li>
                        <li>机身存储：128GB</li>
                        <li>摄像头数量：后置双摄</li>
                        <li>后摄主摄像素：1200万像素</li>
                        <li>前摄主摄像素：1200万像素</li>
                        <li>屏幕比例：其他</li>
                        <li>分辨率：其他</li>
                        <li>屏幕前摄组合：其他</li>
                        <li>操作系统：iOS(Apple)</li>
                    </ul>
                </div>
            </div>
            <div class="item">
                规格与包装
            </div>
            <div class="item">
                售后保障
            </div>
            <div class="item">
                商品评价
            </div>
        </div>
    </div>
    <script>
        // 点击变化背景色
        var boxli = document.querySelectorAll('.box ul li');
        var items = document.querySelectorAll('.tab_con .item');
        for (var i = 0; i < boxli.length; i++) {
            boxli[i].setAttribute('index', i);
            boxli[i].onclick = function () {
                for (var i = 0; i < boxli.length; i++) {
                    if (i == 0) {
                        boxli[i].className = 'boxs';
                    }
                    boxli[i].className = '';
                }
                this.className = 'current';
                // 点击切换内容
                for (var i = 0; i < items.length; i++) {
                    items[i].style = 'display: none;';
                }

                var index = this.getAttribute('index');
                items[index].style = 'display: block;';
            }
        }
    </script>
</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
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

二、H5自定义属性

设置H5自定义属性

H5规定自定义属性data- 开头作为属性名并赋值.

比如 : <div data-index="1"></div>

获取H5自定义属性

<!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 data-index="1"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.getAttribute('data-index'));  // 1
        // h5新增获取自定义属性
        console.log(div.dataset.index);  // 1
        console.log(div.dataset['index']); // 1
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

dataset 是一个集合, 里面存放了所有以data开头的自定义属性.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/113342