在标签中添加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. 我的android学习经历15

    利用Intent实现有返回结果的页面跳转 主要用的方法: (1)Intent的构造方法:intent(当前界面对象,要跳转的界面.class); (2)接受结果的方法onActivityResult( ...

  2. CronTrigger:Corn表达式

    定时触发 CronTrigger CronTriggers往往比SimpleTrigger更有用,如果您需要基于日历的概念,而非SimpleTrigger完全指定的时间间隔,复发的发射工作的时间表.C ...

  3. shoususaiBti

    Description 郭橐驼,不知始何名.病偻,隆然伏行,有类橐驼者,故乡人号之驼.驼闻之,曰:“甚善.名我固当.”因舍其名,亦自谓橐驼云.其乡曰丰乐乡,在长安西.驼业种树,凡长安豪富人为观游及卖果 ...

  4. Nessus基本命令

    /etc/init.d/nessusd start 启动nessusd服务 默认端口8834 添加用户(未知是什么用户) sudo /opt/nessus/sbin/nessus-adduser

  5. CUBRID学习笔记 38 net调用java的函数过程

    首先要设置java_stored_procedure 为yes  该配置项在cubrid.conf中 书写并编译java代码 public class SpCubrid{      public st ...

  6. zoj 2107&&hdu 1007最近点对问题

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1107 Quoit Design Time Limit: 5 Seconds   ...

  7. 讓 SourceTree 讀取自定的 SSH key

    我目前都在 Mac 底下開發,用 Git 來管理我的程式碼,比較一番之後決定用 SourceTree 來做為 Git client.SourceTree 是一款 Mac 底下的版本控制系統 clien ...

  8. Redis实践操作之—— keyspace notification(键空间通知)

    一.需求分析: 设置了生存时间的Key,在过期时能不能有所提示? 如果能对过期Key有个监听,如何对过期Key进行一个回调处理? 如何使用 Redis 来实现定时任务? 二.序言: 本文所说的定时任务 ...

  9. Http状态总结

    常见的http状态总结: 如果向您的服务器发出了某项请求要求显示您网站上的某个网页,那么,您的服务器会返回 HTTP 状态代码以响应该请求.一些常见的状态代码为: 200 - 服务器成功返回网页 40 ...

  10. Android 自定义对话框

    Android实现自定义对话框效果: 核心代码: package com.example.diydialog; import android.os.Bundle; import android.app ...