zoukankan      html  css  js  c++  java
  • 关于H5的自定义属性data-*

    data-* 是H5的新属性,用来让开发者对标签添加自定义属性的。

    其读写方式有如下几种:

    1. 如果是 data-abc 的格式,则采用正常格式 abc 来读写该属性值

      <div id="content" data-age="18">html5 data-*自定义属性 age</div>

      // 原生 js 方式读写

      var content= document.getElementById('content');

      console.log(content.dataset.age);//读

      content.dataset.name ="小白”;//写

      console.log(content.dataset.name);//读

      // jquery 方式读写

      console.log($('#content').data('age'));//读

      $('#content').data('name', "小黑");//写

      console.log($('#content').data('name'));//读

    2.  若果是 data-abc-abc-abc 的格式,则采用首字母小写的驼峰式 abcAbcAbc 读写该自定义属性值

      <div id="content" data-user-list="user_list">data-user-list自定义属性 </div>

      var list = [{name: "aa", age: 18},{name: "bb", age: 20}]

      // 原生 js 获取方式

      var content= document.getElementById('content');

      console.log(content.dataset.userList);//读

      content.dataset.userList=list;//写

      console.log(content.dataset.userList);//读

      // jquery 方式读写

      console.log($('#content').data('userList'));//读

      $('#content').data('userList', list);//写

      console.log($('#content').data('userList'));//读

    3.  getAttribute/setAttribute方法的使用

      <div id="content" data-name="小a">data-user-list自定义属性 </div>

      var content= document.getElementById('content');

      content.dataset.birthDate = '19990619';//写

      content.setAttribute('age', 25);//写

      console.log(content.getAttribute('data-birth-date')); //读

      console.log(content.getAttribute('data-age')); //读

  • 相关阅读:
    Hadoop实战课程
    R语言实战读书笔记(七)基本统计分析
    R语言实战读书笔记(六)基本图形
    python-unexpected content storage modification出错
    python——no module named XX
    R语言实战读书笔记(五)高级数据管理
    R语言缺失值信息处理
    R语言,NA,NAN
    R语言实战读书笔记(四)基本数据管理
    R语言实战读书笔记(三)图形初阶
  • 原文地址:https://www.cnblogs.com/s-qiu/p/7339094.html
Copyright © 2011-2022 走看看