ThatManK Mobile Article

H5自定义属性

Category: JS Tutorial: DOM实战 Published: 2026-04-07 13:58 Views: 20 Likes: 0 Comments: 0

H5 自定义属性

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>
    <div getTime="20" data-index="2" data-list-name="andy"></div>

    <script>
      var div = document.querySelector("div");
      console.log(div.getTime); // undefined
      console.log(div.getAttribute("getTime")); // 20

      div.setAttribute("data-time", 20);
      console.log(div.getAttribute("data-index")); // 2
      console.log(div.getAttribute("data-list-name")); // andy

      // h5新增的获取自定义属性的方法 它只能获取data-开头的
      // dataset 是一个集合里面存放了所有以data开头的自定义属性
      console.log(div.dataset); // {index: '2', listName: 'andy', time: '20'}
      console.log(div.dataset.index); // 2
      console.log(div.dataset["index"]); // 2

      // 如果自定义属性里面有多个-链接的单词, 我们获取的时候采取 驼峰命名法
      console.log(div.dataset.listName); // andy
      console.log(div.dataset["listName"]); // // andy
    </script>
  </body>
</html>