在HTML5之前HTML4我们也可以自定义属性通过setAttribute去设置或者直接写在HTML标签里面那么HTML5新增data-*(*可以替换成你喜欢的任意名字)属性有什么用呢?

更便的捷操作

我们先来给大家介绍一下HTML5 dataset属性,他会以键值对的形式返回你所有以data- 开头的自定义属性

   <p class="test" data-name="cqs" data-age="25" ></p>
   <p  data-name="lw" data-age="25" ></p>
   <p  data-name="ll" data-age="24" ></p>
    var oText = document.querySelector('.test');
         console.log(oText.dataset); //DOMStringMap { age: "25", name: "cqs" }
         console.log(oText.dataset.name,oText.dataset.age); // cqs,25
        console.log(oText.getAttribute('data-name')) // cqs

data-name,data-age 这两个就是我们自定义的属性通过dataset.(点)加data-后面的名字就可以读 name和age的值。同样用getAttribut也可以读取data-*自定义属性的值但是注意要把data-带上。用js去设置data-*自定属性只需DOM.dataset.xx = 'xx';即可
这里需要强调的一点是如果想要定义成data-job-coder="frontEnd"这种data-*-*的格式的自定义属性,在js里面就要转成驼峰命名法。常见的操作有DOM.style.fontSiez = xx+'px';DOM.style.backgroundColor = black; font-size,background-color这些以-连接的属性用js去操作都需要转成驼峰命名法。

   <p class="test" data-name="cqs" data-age="25" ></p>

    var oText = document.querySelector('.test');
        oText.dataset.job = 'coder'; 相当于setAttribute('data-job','coder');
        oText.dataset.jobCoder="frontEnd"

通过对比其实不难发现 用html5 dataset属性去操作data-*自定义属性,就是getAttribute和setAttribute的语法糖。

css可以选择器也可以认data-*

   <style>
     [data-age]{
            background-color: red;
          color:#fff;
    }
   </style>
   <p class="test" data-name="cqs" data-age="25" >22</p>
   <p class="test" data-name="cqs"  >33</p>

    

放心dataset这么好用的属性肯定存在兼容性的问题
Chrome8
Firefox (Gecko) 6.0 (6.0)
internet Explorer 11
Opera 11.10
*Safari 6
参考文章链接: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
扩展阅读: http://www.cnblogs.com/cqsjs/p/5709754.html

HTML5 自定义属性 data-*介绍的更多相关文章

  1. HTML5自定义属性对象Dataset简介

    一.html5 自定义属性介绍 我之前翻译的“你必须知道的28个HTML5特征.窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设 ...

  2. Jquery 操作HTML5自定义属性data-*

    HTML5自定义属性规范的写法<a data-roleid="12"></a>,也可以直接写<a roleid="12">& ...

  3. HTML5 自定义属性 data-*属性名一定要小写吗?

    最近学习 javascript ,参考书籍是< javascript 高级程序设计>第三版,在介绍自定义元素属性时书中给出了一个例子,如下:<div id="myDiv&q ...

  4. 【翻译】详解HTML5 自定义 Data 属性

    原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...

  5. Web 前沿——HTML5 Form Data 对象的使用

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 ...

  6. HTML5 Form Data 对象的使用

    HTML5 Form Data 对象的使用  MDN: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Object ...

  7. HTML5自定义属性操作

    一.自定义属性(html5标准)data-属性名称="属性值" 自定义属性的名称驼峰式命名规则需要用-隔开 自定义属性名称如果连在一起写,大写会自动转为小写 data-user=& ...

  8. HTML5 自定义属性 data-* 和 jQuery.data 详解

    新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得dat ...

  9. HTML5的自定义属性data-*详细介绍和JS操作实例

    当然高级浏览器下可通过脚本进行定义和数据存取.在项目实践中非常有用. 例如: 复制代码 代码如下: <div id = "user" data-uid = "123 ...

  10. jQuery中使用data()方法读取HTML5自定义属性data-*实例

    如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险 主要的方法如 ...

随机推荐

  1. javaScript给元素添加多个class

    <html> <head> <style type="text/css"> .div2{ font-size:16px; color:orang ...

  2. (转) c++ 迭代器

    原地址:http://www.cnblogs.com/marchtea/archive/2012/02/27/2370068.html 前言: 以下的内容为我阅读c++沉思录18,19,20章的笔记以 ...

  3. 转:Linux中find命令-path -prune用法详解

    在Windows中可以在某些路径中查找文件,也可以设定不在某些路径中查找文件,下面用Linux中的find的命令结合其-path -prune参数来看看在Linux中怎么实现此功能. 假如在当前目录下 ...

  4. 提高MySQL数据库查询效率的几个技巧(转载)

    [size=5][color=Red]提高MySQL数据库查询效率的几个技巧(转)[/color][/size]      MySQL由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.我 ...

  5. django中使用json.dumps处理数据时,在前台遇到字符转义的问题

    django后台代码: import json ctx['dormitory_list'] = json.dumps([{", "is_checked": 1}, {&q ...

  6. [TYVJ] P1006 ISBN

    ISBN 背景 Background NOIP2008年普及组第一题   描述 Description    每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1位识别码和3位 ...

  7. 在Git中一定要关注的crlf自动转换

    GitHub 第一坑:换行符自动转换 如果你已经做出了错误的选择,也不需要重新安装,可以直接使用命令行来修改设置.很简单,直接打开这货自带的命令行工具 Git Bash,输入以下命令,再敲回车即可: ...

  8. UESTC_传输数据 2015 UESTC Training for Graph Theory<Problem F>

    F - 传输数据 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit  ...

  9. Multiple outputs from T4 made easy – revisited » DamienG

    Multiple outputs from T4 made easy – revisited » DamienG Multiple outputs from T4 made easy – revisi ...

  10. AIX5.3CPU占用高的问题核查

    AIX5.3 CPU占用高问题核查步骤 1.topas查看占用cpu占用最高的进程的PID 2.执行: ps -mp PID -o THREAD 以查找相应进程下所有正在占用 CPU 的线程的TID ...