在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. linux 为tomcat指定jdk

    Linux为Tomecat指定JDK   在搭建Jenkin+Sonar集成时,由于系统环境配置了jdk1.7,但是jenkins在安装sonar的插件时,需要jdk1.8.,所以需要在Tomcat指 ...

  2. 改变自己从学习linux开始

    刚刚高中毕业,进如大学的时候,总以为摆脱了束缚可以无拘无束的玩耍了.当时真的就是和众多大学生一起,像撒欢的野马,每天逃课,上网,泡吧,不把学习当一会事,学校里教授讲的各种知识也没有听在心里,前两年玩的 ...

  3. BZOJ2588Count on a tree——LCA+主席树

    题目描述 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始为0,即第一个 ...

  4. BZOJ4538 HNOI2016网络（树链剖分+线段树+堆/整体二分+树上差分）

    某两个点间的请求只对不在这条路径上的询问有影响.那么容易想到每次修改除该路径上的所有点的答案.对每个点建个两个堆,其中一个用来删除,线段树维护即可.由于一条路径在树剖后的dfs序中是log个区间,所以 ...

  5. 【Sublime Text3】Package Control：Install Package不能使用解决方法

    官网地址 https://packagecontrol.io/installation 报错内容     解决方法 https://packagecontrol.io/docs/troubleshoo ...

  6. BUPT2017 wintertraining(15) #1 题解

    拖了一周才完成的题解,抛出一个可爱的表情 (っ'-')╮ =͟͟͞͞❤️.对我来说E.F比较难,都是线段树的题,有点久没写了. A - Infinite Sequence CodeForces - 6 ...

  7. linux运维、架构之路-linux文件属性

    1.查看文件属性 ls -lhi 文件属性详细说明 1. 第一列: inode索引节点编号 2. 第二列:文件类型及权限 3. 第三列:硬链接数 4. 第四列:文件或目录所属的用户,即文件的所有者 5 ...

  8. Helm使用详解

    使用1.helm search 查看charts stable是官方的 local是自己的 2.查看repo helm repo list 3.安装 helm install stable/mysql ...

  9. mathML如何在谷歌浏览器进行展示

    前几天不是做了个word公式的解析吗,就是office插入的公式是个xmlObject对象,读出来就是个String,所以要进行转换才能在网页上展示,其实我对这方面也不是很了解,然后各种百度解决方案, ...

  10. shell一些不为人知的技巧

    !$!$是一个特殊的环境变量,它代表了上一个命令的最后一个字符串.如:你可能会这样:$mkdir mydir$mv mydir yourdir$cd yourdir可以改成:$mkdir mydir$ ...