在标签中添加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. 优化Linux生产服务器的经验之谈

    [51CTO独家特稿]如何优化自己的Linux生产服务器?本文结合实际的工作经验,总结了优化Linux生产服务器的九大要点.如果有些方法您尚未采用,不妨一试. 一.时间同步 生产环境下的服务器对时间的 ...

  2. MSChart使用

    制作报表的时候结果出现画红线处的信息太散, 如果没必要全部显示出来,我们可以使用这种效果: 注意和前面的区分,这个功能叫做Collect Pie Slices(收集分区) 要实现此功能,应先了解相关信 ...

  3. Linux 新手非常有用的命令

    http://www.cnblogs.com/felix-/p/4341773.html Linux 新手非常有用的命令 你打算从Windows换到Linux上来,还是你刚好换到Linux上来?哎哟! ...

  4. eclipse创建java类时自动添加注释

    一.按照以下顺序点击菜单 window-->preferences-->java-->Code Stype-->Code Templates-->Code-->Ne ...

  5. ARM工作模式

    ARM工作模式 学习ARM的最好的资料是ARM公司发布的资料:ARM Architecture Reference Manual.pdf 找到章节:Programmers’ Model 由文档可知:A ...

  6. x名称空间

    XAML代码的WPF程序都需要通过语句:xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml",x就是用来映射xmlns:x= ...

  7. h5上滑刷新(分页)

    $('.dom').append('<div class="loadingwrap" id="loading" style="display:n ...

  8. Github上不错的Android开源代码(一)

    总有一些朋友很热心的整理一些好的资料,在收集之后,可以用作阅读.学习和实践.小伙伴们,总有一天,你也能写出 Niubility 的 Android App :-) 为了防止以上链接失效,以及部分内容丢 ...

  9. iOS - Swift 与 Objective-C 互相操作

    前言 在 Swift 语言中,我们可以使用 Objective-C.C 语言编写代码,我们可以导入任意用 Objective-C 写的 Cocoa 平台框架.Objective-C 框架或 C 类库. ...

  10. 老笔记本_Win7_U盘_ReadyBoost

    老笔记本 Win7 U盘 ReadyBoost 值得尝试