不久之前我向大家展示了非常有用的classList API,它是一种HTML5里提供的原生的对页面元素的CSS类进行增、删改的接口,完全可以替代jQuery里的那些CSS类操作方法。而另外一个非常有用的API就是 element.dataset API,从火狐6和Chrome8起就开始对它有了支持。这个简单的API能够让用户getsetHTML页面元素上的data-*属性。下面我们来看看它是如何使用的!

想必大家都知道,我们可以给HTML元素添加自定义的data-*属性。你可以给这个属性起任何名字,但在使用element.dataset API时你需要主要以下一些规则:

  • element.dataset不能够直接拿来用,否者你会遇到报错提示
  • 用JavaScript里使用data-*属性名时,要把名称转变成驼峰式命名(Camel-Case)
  • 名称不能以xml打头
  • 名称里不能有大写字母

假设页面里有下面的元素存在:

<div id="myDiv" data-name="myDiv" data-id="myId"
data-my-custom-key="This is the value"></div>

  要想获取这个data-id属性,你的代码应该写成这样:

// Get the element
var element = document.getElementById("myDiv"); // Get the id
var id = element.dataset.id;

  要想获取data-my-custom-key属性值,你的代码应该写成这样:

// Retrieves "data-my-custom-key"
var customKey = element.dataset.myCustomKey;

  给自定义属性赋值的方法是这样的:

// Sets the value to something else
element.dataset.myCustomKey = "Some other value"; // Element would be:
// <div id="myDiv" data-name="myDiv" data-id="myId"
// data-my-custom-key="Some other value"></div>

  如果一个自定义属性并不存在,但在程序中你给它赋值,它会自动创建:

// Set new data- attribute
element.dataset.mootoolsFtw = "true"; // Element would be:
// <div id="myDiv" data-name="myDiv" data-id="myId"
//data-my-custom-key="Some other value" data-mootools-ftw="true">
//</div>

  也许你会认为data-*属性里可以存放对象,但事实上不行,dataset不会初始化这些对象。我不清楚dataset对长度的限制,但在里面存放大量的数据必定会是DOM变得臃肿不堪,很难调试。喜欢使用jQuery的朋友应该知道jQuery里也有相应的$.data()方法,没错,HTML5里的这个原生的dataset就是来替代它的,如果你的页面只需要简单的操作data-*自定义属性,就不需要引入这些体积越来越多的jQuery工具库了,不是吗?

使用HTML5中的element.dataset操作自定义data-*数据的更多相关文章

  1. 转:HTML5中的element.dataset

    使用HTML5中的 element.dataset 操作自定义 data-* 数据: 不久之前我向大家展示了非常有用的classList API,它是一种HTML5里提供的原生的对页面元素的CSS类进 ...

  2. HTML5中的数据集dataset和自定义属性data-*

    在html5中可为所有元素添加一种自定义的属性,这种属性的前缀以data-开头,比如:data-name,目的是为元素提供与页面渲染无关,但与dom元素强相关的属性.添加完自定义属性后我们可以通过元素 ...

  3. tablib.Dataset()操作exl类型数据之“类方法”研究

    #tablib.Dataset()操作exl类型数据之“类方法”研究 import tablib #初始化 data=tablib.Dataset() #设置列标题 data.headers=('na ...

  4. HTML5中两种方法实现客户端存储数据

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...

  5. js中对cookie的操作及json数据与cookie结合的用法

    cookie的使用 添加cookie 添加cookie:document.cookie = “key=value”; // 一次写入一个键值对 document.cookie = 'test1=hel ...

  6. HTML5中的自定义属性data-*

    在html5中,给元素添加自定义属性需要用到data-*,比如data-name,添加完data-自定义属性之后通过元素的dataset属性来访问其值. dataset与getAttribute/se ...

  7. HTML5中的Blob对象的使用

    HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN ...

  8. js中location.search、split()HTML5中localStorage

    1. location.search在客户端获取Url参数的方法 location.search是从当前URL的?号开始的字符串 如:http://www.baidu.com/s?wd=baidu&a ...

  9. HTML5中的二进制大对象Blob(转)

    HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN ...

随机推荐

  1. 设置Safari浏览器在标签栏上打开新窗口,而不是弹出一个新窗口

    打开Safari浏览器的偏好设置,如图: 打开“标签”一项,如上图.在“在标签(而不是窗口)中打开页面:”中设置.

  2. sql 基本操作

    SQL基本操作   一数据类型1整数型 int2精确数值型 decimal(n,p)n为总位数,p为小数位数3浮点型 float4字符型char(n)n最大为4,varchar(n)5日期型datat ...

  3. c# 数据库操作学习

    一. 如何处理数据库连接 1. 数据库连接可以分为“物理连接”和“逻辑连接”(默认使用连接池的情况下Pooling=true): 物理连接:创建数据库连接时,默认会有一定数量的物理连接(默认Min P ...

  4. wamp+zendstudio12+xDebugger环境搭建

    1.网上找到Wampserver,下载即可,一路安装即可,安装好后打开浏览器输入http://localhost即可看到有没有安装成功 比如我的是这样的,就说嘛wampserver安装成功了 wamp ...

  5. Vue.js学习 Item1 --快速入门

    我们以 Vue 数据绑定的快速导览开始.如果你对高级概述更感兴趣,可查看这篇博文. 尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子.在浏览器新标签页中打开它,跟 ...

  6. Linux安全运维日志排查几个 tips

    运维日志排查记录 前言 记录一些排查常见日志的命令,方法wiki,欢迎补充(Markdown 语法). 常用命令 查找关键词并统计行数 cat 2015_7_25_test_access.log | ...

  7. Laravel 5 基础(六)- 数据库迁移(Migrations)

    database migrations 是laravel最强大的功能之一.数据库迁移可以理解为数据库的版本控制器. 在 database/migrations 目录中包含两个迁移文件,一个建立用户表, ...

  8. 在GridControl控件中使用SearchLookUpEdit构建数据快速输入

    较早之前,曾经介绍了一篇文章<使用DataGridView数据窗口控件,构建用户快速输入体验>,介绍了在传统DataGridView中嵌入一个数据窗口进行选择列表,从而实现数据快速录入的操 ...

  9. android JSON 技术

    json 语法检查和在线解析网址:http://json.parser.online.fr/ limengwe android Json解析详解(详细代码) http://blog.csdn.net/ ...

  10. 9.python的布尔类型与流程控制

    布尔类型其实可以算是一种特殊的数字,下面是 help() 函数得到的帮助信息: Help on class bool in module __builtin__: class bool(int) | ...