在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。

使用data-*可以解决自定义属性混乱无管理的现状。下面展开对此属性的操作介绍

1.写入

//方式1：JavaScript方式

elementNode.dataset.attributeName = attributeValue;

//方式2：HTML方式(以DIV为例)

<div data-attributeName='value' ></div>

2.读取

　　2.0  我们在添加或读取属性的时候需要去掉前缀data-*，像上面的例子我们没有使用test.dataset.data-attributeName = attributeValue;的形式

　　2.1 如果属性名称中还包含连字符(-)，需要转成驼峰命名方式，但如果在CSS中使用选择器，我们需要使用连字符格式

//javaScript

var attributeVaule = elementNode.dataset.attributeName;

//CSS

[data-attributeNamePart1-Part2]{

  // style...

}

3.综合demo

//css

[data-johnny-birthdate]{

    width: 100%;

    height: 5em;

    background-color: red;

}

//html

...

<body>

	<table id="table">

	</table>

</body>

...

//js

var table = document.getElementById("table");

table.dataset.johnnyBirthdate = "1995-01-01"; //设置(添加)自定义属性

console.log("dataset.johnnyBirthdate[JS]:", table.dataset.johnnyBirthdate);//获取自定义属性值

console.log("data-johnny-birthdate[HTML/CSS]:", table.dataset.johnnyBirthdate);//获取自定义属性值

　　

　　HTML：页面结构

HTML：运行效果

控制台：JavaScript

参考文献：

　　[HTML5 data-* 自定义属性](http://www.cnblogs.com/dolphinX/p/3348458.html)

JavaScript之HTML5 data-* 自定义属性[HTML5标准 node.dataset.attributeName]的更多相关文章

  1. 深入理解HTML5：语义、标准与样式（勇猛精进早登大师殿堂创最优品质交互）

    深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互) [美]布拉德福(Bradford,A.) [美]海涅(Haine,P.)著 高京译 ISBN 978-7-121-20552 ...

  2. HTML5——Data Url生成

    HTML5——Data Url生成 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  3. JavaScript本地存储实践（html5的localStorage和ie的userData）

    http://www.css88.com/archives/3717 JavaScript本地存储实践(html5的localStorage和ie的userData) 发表于 2011年06月11日  ...

  4. html5 data属性的使用

    html5 data属性定义和用法 <ul> <li data-animal-type="bird">Owl</li> <li data- ...

  5. 深入理解HTML5：语义、标准与样式

    <深入理解HTML5:语义.标准与样式> 基本信息 作者: (美)布拉德福(Bradford,A.) 海涅(Haine,P.) 译者: 高京 出版社:电子工业出版社 ISBN:978712 ...

  6. 不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2515 如果我们不做什 ...

  7. HTML5学习总结——HTML5入门与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...

  8. HTML5 简介、HTML5 浏览器支持

    HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. HTML5 简单易学. 什么是 HTML5? HTML5 ...

  9. 【HTML5】初识HTML5

    HTML5 简介 HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. HTML5 简单易学. HTML5 是下 ...

随机推荐

  1. php技术–php中感叹号!和双感叹号!!的用法(三元运算)

    ---恢复内容开始--- if(文章==有用){狂点我;} 在php持术或其他语言中我们经常会看到感叹号的用法,有一定程序语言基础的朋友都知道单个感叹号的作用是取反的意思,也就是取当前结果的反面,如: ...

  2. linux中内存使用原理

    首先介绍一下linux中内存是如何使用的. 当有应用需要读写磁盘数据时,由系统把相关数据从磁盘读取到内存,如果物理内存不够,则把内存中的部分数据导入到磁盘,从而把磁盘的部分空间当作虚拟内存 来使用,也 ...

  3. 读取excel思路

    1.输入地址 2.输入指定的sheet  通过sheet()[]方式指定 3.输入执行的单元位置 通过 .cell_value(x,y)方式指定 示例 data = xlrd.open_workboo ...

  4. .net 手机滑动加载

    $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).h ...

  5. 有趣的线段树模板合集（线段树，最短/长路，单调栈，线段树合并，线段树分裂，树上差分，Tarjan-LCA，势能线段树，李超线段树）

    线段树分裂 以某个键值为中点将线段树分裂成左右两部分,应该类似Treap的分裂吧(我菜不会Treap).一般应用于区间排序. 方法很简单,就是把分裂之后的两棵树的重复的\(\log\)个节点新建出来, ...

  6. linux保存住github的账号和密码

    我是用 shell 命令来执行 git 操作的,所以就决定在 --global 配置一下用户名和密码,不用每次手动输入了. 设置步骤 1. 首先需要 ftp 连接到你的 Linux 服务器,在根目录( ...

  7. loj #117. 有源汇有上下界最小流

    题目链接 有源汇有上下界最小流,->上下界网络流 注意细节,边数组也要算上后加到SS,TT边. #include<cstdio> #include<algorithm> ...

  8. 让一个继承unittest.TestCase的类下的setUp和tearDown只执行一次

    知道unittest单元测试框架的朋友应该都知道, 执行继承了unittest.TestCase的类下每个test开头的方法(就是用例)时,都会执行setUp和tearDown,如下面的例子所示: i ...

  9. suoi37 清点更多船只 (卡空间线段树)

    sbw巨佬的卡空间方法,把线段树的叶节点只记到长度为16的区间,然后在叶节点上暴力修改查询,这样点数是$\frac{N}{8}$的,可以过... orz #include<bits/stdc++ ...

  10. 【hdu5306】 Gorgeous Sequence

    http://acm.hdu.edu.cn/showproblem.php?pid=5306 (题目链接) 题意 区间取$min$操作,区间求和操作,区间求最值操作. Solution 乱搞一通竟然A ...