HTML5自学笔记[ 6 ]data自定义数据
在标签中添加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自定义数据的更多相关文章
- Python自学笔记——Matplotlib风羽自定义
[前言]对于气象专业的小学生来说,风场是预报重要的参考数据,我们所知的风羽有四种:短线代表风速2m/s,长线代表风速4m/s,空心三角代表风速20m/s,实心三角代表风速50m/s.而matplotl ...
- Html5 自学笔记
1 html的全称 Hyper Text Markup Language 2 HTML的意义 使用标记标签( Markup Tag)来描述网页 3 HTML标签一定成对吗 是 4 <html ...
- HTML5自学笔记[ 18 ]canvas绘图基础5
获取图像数据:getImgData(x,y,w,h),返回的是一个ImageData对象,这个对象有三个属性保存图像信息:width/height/data.data是一个数组,保存了每个像素的信息, ...
- HTML5学习笔记之客户端存储数据方法:localStorage(),sessionStorage()
HTML5提供了两种在客户端存储数据的新方法: localStorage():没有时间限制的数据存储 sessionStorage():针对一个session的数据存储 下面的一个例子用localSt ...
- HTML5自学笔记[ 21 ]canvas绘图实例之马赛克
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 11 ]canvas绘图基础1
html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...
- HTML5自学笔记[ 10 ]简单的购物车拖拽
用html5拖拽功能实现了一个简单的购物车,样式简陋,得学学画画提高下审美了T^T: <!doctype html> <html> <head> <meta ...
- HTML5自学笔记[ 9 ]HTML5实现元素的拖放
要想在html5中实现元素的拖放,被拖放元素就必须设置属性draggable="true";被拖放元素被放置的地方是另外一个元素,该元素是目标元素:这两个元素在拖放过程中都会触发不 ...
随机推荐
- iOS深入学习(UITableView系列4:使用xib自定义cell)
可以通过继承UITableViewCell重新自定义cell,可以像下面一样通过代码来自定义cell,但是手写代码总是很浪费时间, ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...
- CodeForces 490C Hacking Cypher
Hacking Cypher Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Sub ...
- awk 以HWI开头,并且:相邻两行的第一个字段完全相同;
## 思路:以HWI开头,并且:相邻两行的第一个字段完全相同:awk 'BEGIN{ last_col_1="xxxxxx"; last_row="bbbbbbbbbbb ...
- py延迟注入SQL脚本
延迟注入工具(python) #!/usr/bin/env python # -*- coding: utf-8 -*- # 延迟注入工具 import urllib2 import time imp ...
- bzoj 1467: Pku3243 clever Y 扩展BSGS
1467: Pku3243 clever Y Time Limit: 4 Sec Memory Limit: 64 MB[Submit][Status][Discuss] Description 小 ...
- HDU 5929 Basic Data Structure 模拟
Basic Data Structure Time Limit: 7000/3500 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Oth ...
- FLASH CC 2015 CANVAS 中 createjs 移除绑定事件
myBtn.addEventListener("click", function(evt) { // do stuff... evt.remove(); // removes th ...
- varchar(10)与nvarchar(10)有什么区别
前者是非unicode型,存储字符按1个算(内部空间存储占1字节),存储汉字的话按2个算, 就是可以存10个字符或者5个汉字 后者是unicode型,存储什么都是按1个算(内部空间存储占2字节), 就 ...
- 《易货》Alpha版本发布说明
一.引言 本说明描述了校淘1.0版本的已经实现的主要功能,对运行环境的要求,以及目前软件所具有的一些问题和限制. 二.主要功能 本软件面向的是在校大学生,方便大学生将自己闲置的物品以二手商品的形式发布 ...
- 前端代码新写法——Zen Coding
是不是还在为html繁琐的标签写法而苦恼? 是不是还在枯燥的写尖括号? Zen Coding的到来将让前端编码不在繁琐.不再拘泥html的尖括号和一堆一堆的标签. 先看看ZenCoding的效果图. ...