在标签中添加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. 【leetcode❤python】237. Delete Node in a Linked List

    #-*- coding: UTF-8 -*- # Definition for singly-linked list.# class ListNode(object):#     def __init ...

  2. CronTrigger:Corn表达式

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

  3. 手把手教你把Vim改装成一个IDE编程环境(图文)

    http://blog.csdn.net/wooin/article/details/1858917

  4. FRM-10001, FRM-10002, FRM-10003 Oracle Form Builder Error Solution

    These errors occurred usually due to forms connection problem or some internal problem, the solution ...

  5. VS连接Windows Mobile模拟器

    原文:http://www.cnblogs.com/xjimmyshcn/archive/2011/07/19/2111087.html 一.WinCE 模拟器通过ActiveSync 6.1(即Wi ...

  6. set集合的用法总结(转)

    python的set和其他语言类似, 是一个无序不重复元素集, 基本功能包括关系测试和消除重复元素. 集合对象还支持union(联合), intersection(交), difference(差)和 ...

  7. 微博传播数量和传播深度的预测--基于pyspark和某个回归算法

    8-28决定参加一下这个千万条的数据处理任务,因为场景和自己做过的一个回归分析预测差不多,第一天开始在小规模的数据上做准备工作. 第二次大修改版本 date 20160829 星期一¶ 原始数据处理, ...

  8. Android 布局简要范例

    Android的布局决定着实际的UI界面呈现情况,正是这些UI界面的组合与千变万化,才呈现出了各式各样的风格. 而这些基础的布局框架结构很重要,需要玩的很熟悉.我将以前参考的部分代码示例,所做的相关实 ...

  9. 常见Android测试工具简介

    在进行android设备测试过程中,在进行系统测试时候,往往需要关注到很多方面,导致一个崩溃或者运行一段时间自动重启或者停止的问题很多.最简单来看,影响因素就有:底层硬件设备.OS层.上层app层.另 ...

  10. git fork

    http://help.github.com/fork-a-repo/ 概要: 克隆别人的代码库到自己的项目中,可以作为子模块的形式使用,或二次开发 操作流程: 在开源项目中点击fork按钮,稍等一会 ...