HTML5自定义数据属性data-*

'人'在江湖，'身'不由己

---

HTML元素属性可以分为两种类：基本属性 和 自定义数据属性

基本属性：

• id、class等基本属性的主要作用是用来给一组元素添加样式信息的 或者 用来获取指定元素的。

  <div>
  	<span id="normal">基本属性作用</span>
  </div>
  

  <style type="text/css">
      #normal
      {
          color: red;
          font-size: 24px;
      }
  </style>
  

  <script type="text/javascript">
      $('#normal').css({"color":"red","font-size":"24px"})
  </script>
  

自定义数据属性：

• 所有在元素上以data-开头的属性均为数据属性，（粒如：data-id、data-value、data-distance等 ）, data-*数据属性是用于存储页面或应用程序的私有自定义数据。

• 数据属性用于存储一些不需要显示在浏览器的额外信息，但后期可能需要用到的数据。

• 访问数据属性值：(以data-id为例)

  • JavaScript访问

    • document.querySelector(selector).getAttribute(‘data-id’);

    • document.querySelector(selector).dataset.id;

  • jQuery访问

    • $(selector).attr("data-xxx ")

    • $(selector).data(‘id’);

    • 注意：使用jQuery时，使用$(selector).data(xxx)来访问这些属性的值，这里的xxx与data属性名有关。粒如：data-id，则xxx为id；data-value，则xxx为value；data-number，则xxx为number

• 粒如：

  <div class="item-input">
      <select id="product-category">
          <option data-value="28">招牌系列</option>
          <option data-value="29">果茶系列</option>
          <option data-value="31">原创奶茶</option>
          <option data-value="30">咖啡系列</option>
      </select>
  </div>
  

  //获取下拉列表框中被选中option元素的数据属性的值,并保存到productCategory对象里
  product.productCategory = {
          productCategoryId : $('product-category option:checked').data('value')
      };
  

数据属性使用规则：

• 第一：存储在这些属性中的数据应该是字符串类型

• 第二：数据属性应该只在没有其他合适的HTML元素或属性时使用。例如，使用data-class属性存储元素class属性的值是不恰当的