在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. 洛谷 P3237 [HNOI2014]米特运输

    题面链接 get到新技能当然要来记录一下辣 题意:给一棵树,每个点有一个权值,要求同一个父亲的儿子的权值全部相同,父亲的取值必须是所有儿子的权值和,求最少的修改数量 sol:自己瞎鸡巴yy一下可以发现 ...

  2. Django的datetime.timedelta类(Django编程-2)

    datetime.timedelta对象代表两个时间之间的时间差,两个date或datetime对象相减就可以返回一个timedelta对象. 如果有人问你昨天是几号,这个很容易就回答出来了.但是如果 ...

  3. Ubuntu 16.04安装Eclipse

    此篇为http://www.cnblogs.com/EasonJim/p/7139275.html的分支页. 前提:必须正确安装JDK和Tomcat. 下载: https://www.eclipse. ...

  4. Codeforces Round #337 (Div. 2) B. Vika and Squares

    B. Vika and Squares time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  5. 自学Aruba5.1-Aruba 基于角色(role)的策略管理（重点）

    点击返回:自学Aruba之路 自学Aruba5.1-Aruba 基于角色(role)的策略管理(重点) 1. 角色Role介绍 在ArubaOS中,用户(User)指的是已经完成连接,并获取到IP地址 ...

  6. Android 判定手机是否root

    Android获取手机root的状态 package com.app.demo; import java.io.File; import android.app.Activity; import an ...

  7. BZOJ 2901: 矩阵求和

    2901: 矩阵求和 Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 411  Solved: 216[Submit][Status][Discuss] ...

  8. BZOJ3235 [Ahoi2013]好方的蛇 【单调栈 + dp】

    题目链接 BZOJ3235 题解 求出每个点为顶点,分别求出左上,左下,右上,右下的矩形的个数\(g[i][j]\) 并预处理出\(f[i][j]\)表示点\((i,j)\)到四个角的矩形内合法矩形个 ...

  9. php多进程、IPC和事件驱动

    http://www.laruence.com/2008/04/21/101.html http://zhidao.baidu.com/link?url=zXm_12CxqGo-xYvOF4oyBJC ...

  10. 初级BFS

    输入:n个顶点,m条边. 接下来输入每一条边的两个顶点. 输出遍历的顺序 #include<iostream> #include<queue> ];//bool mark[10 ...