4.标签属性

预定义属性

  • 打点获取

    自定义属性

  • 例如自定义索引，用setattribute设置，getattribute获取

  • setattribute(‘ 自定义属性名’)
  • getattribute(‘ ‘,’ ‘) 参数1：自定义属性名 参数2：属性值

  • 自定义标签属性为data-XXX

    1.  在获取自定义标签属性时可以用dataset.XXX
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9. <body>
    10.   <a href="www.baidu.com">百度</a>
    11.   <ul class="list">
    12.       <!-- data-color  index 属于自定义标签的属性-->
    13.       <li data-color="red">1</li>
    14.       <li index="1">2</li>
    15.       <li>3</li>
    16.   </ul>
    17.   <script>
    18.       var a = document.querySelector('a');
    19.       var lis = document.querySelectorAll('.list>li');
    21.       // 获取标签的属性
    22.       console.log(a.href);
    24.       // (1)获取自定义的标签属性  getAttribute()
    25.       console.log(lis[0].getAttribute('data-color'));
    26.       console.log(lis[1].getAttribute('index'));
    28.       // (2)设置自定义的标签属性 setAttribute()
    29.       // 参数1：自定义属性名  参数2：属性值
    30.       lis[2].setAttribute('index',2)
    31.       lis[0].setAttribute('data-color','blue')
    32.       console.log(lis[2].getAttribute('index'));
    33.       console.log(lis[0].getAttribute('data-color'));
    34.   </script>
    35. </body>
    36. </html>