JavaScript之HTML5 data-* 自定义属性[HTML5标准 node.dataset.attributeName]
在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]的更多相关文章
- 深入理解HTML5：语义、标准与样式（勇猛精进早登大师殿堂创最优品质交互）
深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互) [美]布拉德福(Bradford,A.) [美]海涅(Haine,P.)著 高京译 ISBN 978-7-121-20552 ...
- HTML5——Data Url生成
HTML5——Data Url生成 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- JavaScript本地存储实践（html5的localStorage和ie的userData）
http://www.css88.com/archives/3717 JavaScript本地存储实践(html5的localStorage和ie的userData) 发表于 2011年06月11日 ...
- html5 data属性的使用
html5 data属性定义和用法 <ul> <li data-animal-type="bird">Owl</li> <li data- ...
- 深入理解HTML5：语义、标准与样式
<深入理解HTML5:语义.标准与样式> 基本信息 作者: (美)布拉德福(Bradford,A.) 海涅(Haine,P.) 译者: 高京 出版社:电子工业出版社 ISBN:978712 ...
- 不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2515 如果我们不做什 ...
- HTML5学习总结——HTML5入门与新增标签
一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...
- HTML5 简介、HTML5 浏览器支持
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. HTML5 简单易学. 什么是 HTML5? HTML5 ...
- 【HTML5】初识HTML5
HTML5 简介 HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. HTML5 简单易学. HTML5 是下 ...
随机推荐
- ABP框架学习
一.总体与公共结构 1,ABP配置 2,多租户 3,ABP Session 4,缓存 5,日志 6,设置管理 7,Timing 8,ABPMapper 9,发送电子邮件 二.领域层 10,实体 11, ...
- dfs和bfs（链式前向星实现）
dfs代码: #include<iostream>#include<Algorithm>#include<cstring>#include<cstdio> ...
- IBM推出新一代云计算技术来解决多云管理
IBM 云计算论坛在南京举行,推出了一项全新的开放式技术,使用户能够更加便捷地跨不同云计算基础架构来管理.迁移和整合应用. IBM 多云管理解决方案(Multicloud Manager)控制面板 据 ...
- multi_index_container 多索引容器
multi_index_container是c++ boost库中的一个多索引的容器.因工作中用到了,特来测试试用. #include "stdafx.h" #include &q ...
- hadoop MapReduce 入门
原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7687120.html ------------------------------------ ...
- 【题解】 Codeforces Edu44 F.Isomorphic Strings （字符串Hash）
题面戳我 Solution 我们按照每个字母出现的位置进行\(hash\),比如我们记录\(a\)的位置:我们就可以把位置表示为\(0101000111\)这种形式,然后进行字符串\(hash\) 每 ...
- Deep Learning（深度学习）学习笔记整理系列二
声明: 1)该Deep Learning的学习系列是整理自网上很大牛和机器学习专家所无私奉献的资料的.具体引用的资料请看参考文献.具体的版本声明也参考原文献. 2)本文仅供学术交流,非商用.所以每一部 ...
- 【转】如何基于linux进程通信设计方案
前言 linux下的进程通信手段基本上是从Unix平台上的进程通信手段继承而来的.而对Unix发展做出重大贡献的两大主力AT&T的贝尔实验室及BSD(加州大学伯克利分校的伯克利软件发布中心)在 ...
- Jenkins中配置邮件通知实例演示
前言:本文通过安装配置Jenkins实现邮件通知,告知一个C# Git Repo的build成功与否 一.预配条件 在windows上安装Jenkins和它推荐安装的Plugins 创建一个@163. ...
- JAVA注释的另一种神奇用法
每个JAVA程序员在写程序的时候一定都会用到注释,本篇博客不是讲怎么定义注释,而是说明注释神奇的一种写法. /** * 这是一个测试类 */ public class Test { /** * 程序的 ...