• 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>

    运行结果:

  • 相关阅读:
    java数组基础
    java异常处理机制
    java面向对象基础(四):抽象类和接口
    java面向对象基础(二)
    java类路径classpath和包
    java面向对象基础(一)
    Tomcat(二):tomcat配置文件server.xml详解和部署简介
    java集合框架(Collections Framework)
    java基础数据类型包装类
    String、StringBuilder和StringBuffer类
  • 原文地址:https://www.cnblogs.com/huanying2015/p/8529323.html
Copyright © 2020-2023  润新知