• 特性（attribute）— 写在 HTML 中的内容。
  • 属性（property）— DOM 对象中的内容。

HTML 特性有以下几个特征：

  • 它们的名字是大小写不敏感的（id 与 ID 相同）。
  • 它们的值总是字符串类型的。

操作特性的方法：

  • elem.hasAttribute(name) — 检查是否存在这个特性。
  • elem.getAttribute(name) — 获取这个特性值。
  • elem.setAttribute(name, value) — 设置这个特性值。
  • elem.removeAttribute(name) — 移除这个特性。
  • elem.attributes — 所有特性的集合。

自定义特性

以 “data-” 开头的特性均被保留供程序员使用。它们可在 dataset 属性中使用。
例如，如果一个 elem 有一个名为 "data-about" 的特性，那么可以通过 elem.dataset.about 取到它。
像 data-order-state 这样的多词特性可以以驼峰式进行调用：dataset.orderState

示例1：自定义特性设置元素样式

  1. <style>
  2.   .order[data-order-state="new"] {
  3.     color: green;
  4.   }
  6.   .order[data-order-state="pending"] {
  7.     color: blue;
  8.   }
  10.   .order[data-order-state="canceled"] {
  11.     color: red;
  12.   }
  13. </style>
  15. <div id="order" class="order" data-order-state="new">
  16.   A new order.
  17. </div>
  19. <script>
  20.   // 读取
  21.   alert(order.dataset.orderState); // new
  23.   // 修改
  24.   order.dataset.orderState = "pending"; // (*)
  25. </script>

示例2： 根据特性查找元素，并读取特性值

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5.   <div data-widget-name="menu">Choose the genre</div>
  7.   <script>
  8.     // 获取它
  9.     let elem = document.querySelector('[data-widget-name]');
  11.     // 读取值
  12.     alert(elem.dataset.widgetName);
  13.     // 或
  14.     alert(elem.getAttribute('data-widget-name'));
  15.   </script>
  16. </body>
  17. </html>