html 自定义属性的获取和应用

在html 中，我们可以给元素设置自定义属性，格式： data-属性="属性值"，可以设置一个，也可以设置多个

1.获取元素属性的常规方法：直接获取元素，然后使用getAttribute()函数获取元素属性的值

<!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>
    <style>
        ul {
            background: #ccc;
            width: 500px;
            height: 200px;
        }
    </style>
    <script>
        window.onload = function() {
            // var aInput = document.getElementsByTagName("input");  //不知道为什么，这样获取的元素不能使用遍历 forEach
            var aInput = document.querySelectorAll("input");
            var oUl = document.getElementById("box");
            aInput.forEach(function(val, index) {
                val.onclick = function() {
                    if (index == 0) {
                        oUl.innerHTML = oUl.getAttribute('data-name');
                    } else if (index == 1) {
                        oUl.innerHTML = oUl.getAttribute('data-sex');
                    } else {
                        oUl.innerHTML = oUl.getAttribute('data-age');
                    }
                }
            });
        }
    </script>
</head>
<body>
    <input type="button" value="姓名"><input type="button" value="性别"><input type="button" value="年龄">
    <ul id="box" data-name="huanying2015" data-sex="man" data-age="25"></ul>
</body>
</html>

或者：

 1  <script>
 2         window.onload = function() {
 3             // var aInput = document.getElementsByTagName("input");  //不知道为什么，这样获取的元素不能使用遍历 forEach
 4             var aInput = document.querySelectorAll("input");
 5             var oUl = document.getElementById("box");
 6             aInput[0].onclick = function() {
 7                 oUl.innerHTML = oUl.getAttribute('data-name');
 8             }
 9             aInput[1].onclick = function() {
10                 oUl.innerHTML = oUl.getAttribute('data-sex');
11             }
12             aInput[2].onclick = function() {
13                 oUl.innerHTML = oUl.getAttribute('data-age');
14             }
15         }
16 </script>

运行结果：

2. 不适用getAtrribute()函数，也可以获取元素属性的值，使用 dataset 来获取，例如：<div id="box" data-kkt="hello">hello world!</div> ；当要获取元素div中data-kkt属性的值时，可以先获取元素 el = $("#box") ;然后 el.dataset.kkt ,这样就可以获取元素的属性值了

把上面这个获取属性值的函数改为 el.dataset.属性改写如下：

 1 <script>
 2         window.onload = function() {
 3             // var aInput = document.getElementsByTagName("input");  //不知道为什么，这样获取的元素不能使用遍历 forEach
 4             var aInput = document.querySelectorAll("input");
 5             var oUl = document.getElementById("box");
 6             aInput.forEach(function(val, index) {
 7                 val.onclick = function() {
 8                     if (index == 0) {
 9                         oUl.innerHTML = oUl.dataset.name;
10                     } else if (index == 1) {
11                         oUl.innerHTML = oUl.dataset.sex;
12                     } else {
13                         oUl.innerHTML = oUl.dataset.age;
14                     }
15                 }
16             });
17 
18             // aInput[0].onclick = function() {
19             //      oUl.innerHTML = oUl.dataset.name;
20             // }
21             // aInput[1].onclick = function() {
22             //      oUl.innerHTML = oUl.dataset.sex;
23             // }
24             // aInput[2].onclick = function() {
25             //      oUl.innerHTML = oUl.dataset.age;
26             // }
27         }
28 </script>

运行结果，也是一样的：

3. 使用自定义索引制作选项卡：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         div {
10             width: 300px;
11             height: 200px;
12             display: none;
13             text-align: center;
14             border: 1px solid #ccc;
15         }
16         div.php {
17             background: red;
18         }
19         div.javascript {
20             background: blue;
21         }
22         div.html {
23             background: green;
24         }
25         div.linux {
26             background: yellow;
27         }
28     </style>
29     <script>
30         window.onload = function() {
31             var aInput = document.querySelectorAll("input");
32             var aDiv = document.querySelectorAll("div");
33             aInput.forEach(function(val, key) {
34                 val.onclick = function() {
35                     for (var i = 0, len = aInput.length; i < len; i++) {
36                         aInput[i].style.background = "";
37                         aDiv[i].style.display = "none";
38                     }
39                     val.style.background = 'red';
40                     // val.dataset.target 获取val元素的自定义target属性，因为自定属性里前有一个#号，所以去掉#，就变成了val.dataset.target.substring(1)
41                     // 对应的div元素Id刚好是 val 的自定义索引data-target属性去掉# 号，所以可以按照如下方法获取元素，然后进行显示
42                     document.getElementById(val.dataset.target.substring(1)).style.display = 'block';
43                 }
44             });
45         }
46     </script>
47 </head>
48 <body>
49     <input type="button" value="点击1" data-index="1" data-target="#php" style="background:red;">
50     <input type="button" value="点击2" data-index="2" data-target="#javascript">
51     <input type="button" value="点击3" data-index="3" data-target="#html">
52     <input type="button" value="点击4" data-index="4" data-target="#linux">
53     <div id="php" style="display:block" class="php">php 是一门强大的后端脚本语言</div>
54     <div id="javascript" class="javascript"> javascript 是一门强大的前端脚本语言</div>
55     <div id="html" class="html">html 是一门浏览器语言</div>
56     <div id="linux" class="linux">linux 是一门强大的服务器脚本语言</div>
57 </body>
58 </html>

运行结果：