在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. <a>與<link>的區別

    <a>連接網頁: <link>定義文檔與外部資源的關係或引用外部樣式表,屬性ref表示連接對象的類型,stylesheet表示連接的是css類型的. 參考資料: https:/ ...

  2. ceph 安装ceph问题汇总

    1.在不同节点安装ceph时,出现以下异常: 参考这里 ceph deploy RuntimeError: NoSectionError: No section: 'ceph' 解决方法: 在报错的机 ...

  3. Picture POJ - 1177（扫描线求面积并）

    题意:求矩形并的面积.. 解析: 扫描线第一道题....自下而上扫描的... 如果不懂什么是扫描线戳我 #include <iostream> #include <cstdio> ...

  4. 【HDU5831】Rikka with Parenthesis II（括号）

    BUPT2017 wintertraining(16) #4 G HDU - 5831 题意 给定括号序列,问能否交换一对括号使得括号合法. 题解 注意()是No的情况. 任意时刻)不能比(超过2个以 ...

  5. yml实例

    producer.yml apiVersion: v1kind: Podmetadata:name: producer-consumerspec:containers:- image: busybox ...

  6. scrapy-redis爬取豆瓣电影短评，使用词云wordcloud展示

    1.数据是使用scrapy-redis爬取的,存放在redis里面,爬取的是最近大热电影<海王> 2.使用了jieba中文分词解析库 3.使用了停用词stopwords,过滤掉一些无意义的 ...

  7. P1856 矩形周长

    哇!这小破题坑了我好久. 扫描线+线段树 这题数据范围小,没离散化.真要离散化我还搞不好呢. 具体的看这个博客吧. 主要是这个坑爹的c,len把我搞了,其他的还好. 代码: #include < ...

  8. P1339 热浪 最短路径模板题

    这么naive的题面一看就是最短路模板题~~~ ok.首先是floyd算法,tts,记得把k放在最外面就行了. #include <cstdio> #include <cstring ...

  9. 【洛谷P4054】计数问题

    题目大意:维护 N*M 个点,每个点有三个权值,支持单点修改,查询矩形区间内权值等于某个值的点的个数. 题解:矩阵可以看成两个维度,权值为第三个维度,为一个三维偏序维护问题.发现第三维仅仅为单点修改和 ...

  10. 【洛谷P4180】严格次小生成树

    题目大意:给定一个 N 个顶点,M 条边的带权无向图,求该无向图的一个严格次小生成树. 引理:有至少一个严格次小生成树,和最小生成树之间只有一条边的差异. 题解: 通过引理可以想到一个暴力,即:先求出 ...