在标签中添加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. iOS深入学习(UITableView系列4:使用xib自定义cell)

    可以通过继承UITableViewCell重新自定义cell,可以像下面一样通过代码来自定义cell,但是手写代码总是很浪费时间, ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  2. CodeForces 490C Hacking Cypher

    Hacking Cypher Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Sub ...

  3. awk 以HWI开头,并且:相邻两行的第一个字段完全相同;

    ## 思路:以HWI开头,并且:相邻两行的第一个字段完全相同:awk 'BEGIN{ last_col_1="xxxxxx"; last_row="bbbbbbbbbbb ...

  4. py延迟注入SQL脚本

    延迟注入工具(python) #!/usr/bin/env python # -*- coding: utf-8 -*- # 延迟注入工具 import urllib2 import time imp ...

  5. bzoj 1467: Pku3243 clever Y 扩展BSGS

    1467: Pku3243 clever Y Time Limit: 4 Sec  Memory Limit: 64 MB[Submit][Status][Discuss] Description 小 ...

  6. HDU 5929 Basic Data Structure 模拟

    Basic Data Structure Time Limit: 7000/3500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  7. FLASH CC 2015 CANVAS 中 createjs 移除绑定事件

    myBtn.addEventListener("click", function(evt) { // do stuff... evt.remove(); // removes th ...

  8. varchar(10)与nvarchar(10)有什么区别

    前者是非unicode型,存储字符按1个算(内部空间存储占1字节),存储汉字的话按2个算, 就是可以存10个字符或者5个汉字 后者是unicode型,存储什么都是按1个算(内部空间存储占2字节), 就 ...

  9. 《易货》Alpha版本发布说明

    一.引言 本说明描述了校淘1.0版本的已经实现的主要功能,对运行环境的要求,以及目前软件所具有的一些问题和限制. 二.主要功能 本软件面向的是在校大学生,方便大学生将自己闲置的物品以二手商品的形式发布 ...

  10. 前端代码新写法——Zen Coding

    是不是还在为html繁琐的标签写法而苦恼? 是不是还在枯燥的写尖括号? Zen Coding的到来将让前端编码不在繁琐.不再拘泥html的尖括号和一堆一堆的标签. 先看看ZenCoding的效果图. ...