在标签中添加data-name属性并赋值,在js脚本中用ele.dataset.name就可以获取该属性的值。如:

<div id="box" data-age="20">年龄</div>

<script>
    var oDiv = document.getElementById('box');
    alert(oDiv.dataset.age);  //20
</script>

如果name是用-连接的两个及以上单词来命名,那么在js中就要用驼峰式写法来获取,如:

<div id="box" data-my-age="20">年龄</div>

<script>
    var oDiv = document.getElementById('box');
    alert(oDiv.dataset.myAge);  //20
</script>

HTML5自学笔记[ 6 ]data自定义数据的更多相关文章

  1. Python自学笔记——Matplotlib风羽自定义

    [前言]对于气象专业的小学生来说,风场是预报重要的参考数据,我们所知的风羽有四种:短线代表风速2m/s,长线代表风速4m/s,空心三角代表风速20m/s,实心三角代表风速50m/s.而matplotl ...

  2. Html5 自学笔记

      1 html的全称 Hyper Text Markup Language 2 HTML的意义 使用标记标签( Markup Tag)来描述网页 3 HTML标签一定成对吗 是 4 <html ...

  3. HTML5自学笔记[ 18 ]canvas绘图基础5

    获取图像数据:getImgData(x,y,w,h),返回的是一个ImageData对象,这个对象有三个属性保存图像信息:width/height/data.data是一个数组,保存了每个像素的信息, ...

  4. HTML5学习笔记之客户端存储数据方法:localStorage(),sessionStorage()

    HTML5提供了两种在客户端存储数据的新方法: localStorage():没有时间限制的数据存储 sessionStorage():针对一个session的数据存储 下面的一个例子用localSt ...

  5. HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  8. HTML5自学笔记[ 10 ]简单的购物车拖拽

    用html5拖拽功能实现了一个简单的购物车,样式简陋,得学学画画提高下审美了T^T: <!doctype html> <html> <head> <meta ...

  9. HTML5自学笔记[ 9 ]HTML5实现元素的拖放

    要想在html5中实现元素的拖放,被拖放元素就必须设置属性draggable="true";被拖放元素被放置的地方是另外一个元素,该元素是目标元素:这两个元素在拖放过程中都会触发不 ...

随机推荐

  1. sql 自增字段的控制 hibernate注解的写法

    1 创建序列,新建了一个列作为主键 create sequence pbaseinfo INCREMENT BY 1 START WITH 1 NOMAXVALUE NOCYCLE NOCACHE; ...

  2. Latex中关于参考文献的一些经验

    又到了继春节后的又一个投稿高峰,在Latex中写参考文献时经常会出现这样那样的问题,而且出版社不同比如IEEE与Elaver,需要引入的包也有不同.在search解决方案时,发现一篇有用的博文,转载一 ...

  3. SQL触发器,数据库

    触发器类型有两种: 1.AFTER(FOR)触发器 在动作执行之后触发(增删改执行完成后,触发器中的代码再执行),不能为视图指定for触发器,只能为表指定该触发器. 2.instead of触发器 可 ...

  4. python 列表去重(数组)的几种方法

    一.方法1  代码如下 复制代码 ids = [1,2,3,3,4,2,3,4,5,6,1] news_ids = [] for id in ids:     if id not in news_id ...

  5. 经典JSP数据库连接(ORACLE、SQL Server、MySQL)

    1.连接ORACLE8/8I/9I数据库(thin模式) <%@ page language="java" import="java.util.*" pa ...

  6. CUBRID学习笔记 28 执行sql脚本文件

    一下命令在csql下执行. insert_commands.sql为sql脚本文件 ;CL ;READ insert_commands.sql ;RU 第一行的cl 清空命令缓存,等同clear第二行 ...

  7. hdu 1348 (凸包求周长)

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=1348 Wall Time Limit: 2000/1000 MS (Java/Others)    Mem ...

  8. 《FLASH CC 2015 CANVAS 中文教程》——1、导出canvas动画,文件结构浅析

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  9. XAF应用开发教程(五)验证模块

    数据验证是应用程序开发中使用频率最高的功能模块,本节详细介绍一下XAF中如何使用验证模块. XAF 验证模块内置了下面的一些验证规则: 验证规则类型 说明 RuleCombinationOfPrope ...

  10. mysql概要(七)表字段管理,字段的增删改

    1.添加列 放在某列之后 放第一列: 2.修改(声明和名字),删除列 2.1修改声明 2.2删除列