在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. Mac上brew&thrift安装 以及在thrift架构下，自己新作了maven的小例 Demo

    1.缘由 前几天偶尔在网上看到thrift的信息,其内容和作用极大的引起了我的兴趣,因为我也是做iOS开发的,通过在网上的查询发现信息虽然很多实用的很少,容易误导他人,经过自己的成功实践,做了笔录,为 ...

  2. BZOJ4764弹飞大爷——LCT

    题目描述 自从WC退役以来,大爷是越来越懒惰了.为了帮助他活动筋骨,也是受到了弹飞绵羊一题的启发,机房的小伙伴们 决定齐心合力构造一个下面这样的序列.这个序列共有N项,每项都代表了一个小伙伴的力量值, ...

  3. ef 仓储模式 Redis

    接着写一下 上一章提到的 BaseRepositoryRedis.cs 先说说题外话:由于公司希望用到缓存来提高访问速度.那么我理所当然的想到redis. 这个无可厚非.可是当时我们的项目已经开发的差 ...

  4. MYSQL数据插入和更新的语法

    tag:原文章地址 经常会遇到一行数据在特定条件下如果存在就更新列,不存在就插入新的行,用replace和duplicate语法都可以实现,但是也是有区别的.如果是数据覆盖就用replace,如果只是 ...

  5. 自学Linux Shell9.3-基于Red Hat系统工具包：RPM属性依赖的解决方式-YUM在线升级

    点击返回 自学Linux命令行与Shell脚本之路 9.3-基于Red Hat系统工具包:RPM属性依赖的解决方式-YUM在线升级 本节主要介绍基于Red Had的系统(测试系统centos) yum ...

  6. ANDROID 实现 再按一次返回键退出程序 代码片段

    //1.声明变量 // 退出时间 private long currentBackPressedTime = 0; // 退出间隔 private static final int BACK_PRES ...

  7. 【BZOJ2285】[SDOI2011]保密（分数规划，网络流）

    [BZOJ2285][SDOI2011]保密(分数规划,网络流) 题面 BZOJ 洛谷 题解 首先先读懂题目到底在干什么. 发现要求的是一个比值的最小值,二分这个最小值\(k\),把边权转换成\(t- ...

  8. 51nod 1462 树据结构 | 树链剖分 矩阵乘法

    题目链接 51nod 1462 题目描述 给一颗以1为根的树. 每个点有两个权值:vi, ti,一开始全部是零. Q次操作: 读入o, u, d o = 1 对u到根上所有点的vi += d o = ...

  9. Mysql插入、替换和无视

    在现实的生产环境下,通常我们都会遇到这样的应用场景,需要我们更新数据.替换数据,若存在则不操作. insert into表示插入数据,数据库会检查主键,如果出现重复会报错: replace into表 ...

  10. 【模板】Splay

    Splay 均摊复杂度证明见此处 \(\rightarrow\) 链接 代码如下 #include <bits/stdc++.h> using namespace std; const i ...