data-*属性——使用自定义属性的方式存储数据
HTML5提供了data-*属性能存储页面或应用程序的私有自定义数据。只需在属性前加上data-前缀即可,值可以是任意字符串。
存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。
data-* 属性包括两部分:
- 属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
- 属性值可以是任意字符串
注意:用户代理会完全忽略前缀为 "data-" 的自定义属性。
data-属性的一大好处是所有浏览器都支持,可以使用getAttribute方法来获取data-属性的值,用setAttribute方法来设置值。
在JavaScript中通过元素的dataset属性访问data-属性的值,dataset是一个DOMStringMap对象,使用它比使用getAttribute更方便,不用加上data-前缀。
eg: tree.dataset.leaves='46';
如果要删掉一个值,将其置为null,或者使用delete
tree.dataset.leaves=null;
delete tree.dataset.leaves;
jQuery的data方法也可以访问元素的data-属性:
var $tree=$('#tree');
$tree.data('plant-height');
jQuery的data方法会自动转换数据类型:
console.log(typeof $tree.data('leaves')) //number
可以自动反序列化JSON数据,这样可以在后端生成模板时将序列化成JSON直接存入HTML中。
data属性的适用情况:
存储组件日后可能被JavaScript使用到的参数(元素的高度和透明度)
存储于模块关联的数据
存储分析数据(配合GA或者其他数据分析追踪工具)
存储游戏中的值(生命值,魔法值,攻击力等)
不适用的情况:
已经有更适合的属性,说明信息最好存在title属性里,而不是类似data-description的属性
自定义data属性和微格式数据不能混用,两者并无直接关系。微格式通常提供给第三方的程序(如搜索引擎)而自定义data属性是为你自己的程序使用。
不要利用data属性作为应用CSS样式的标准
最新文章
- Linux mips64r2 PCI中断路由机制分析
- SqlServer 分页查询
- Authcode()
- MarkDown常用语法记录
- Leetcode: Number of Segments in a String
- Java.lang.OutOfMemoryError处理
- jsPlumb 学习笔记
- Android四大组件小结
- css居中
- 推荐——基于python
- 如何快速成长?我的java之路!
- Flip Game poj 1753
- POJ 3461 Oulipo(——KMP算法)
- JVM学习六:JVM之类加载器之双亲委派机制
- 消除ExtJS6的extjs-trila字样
- Touch Handling in Cocos2D 3.x(七)
- 【原创】大叔问题定位分享(16)spark写数据到hive外部表报错ClassCastException: org.apache.hadoop.hive.hbase.HiveHBaseTableOutputFormat cannot be cast to org.apache.hadoop.hive.ql.io.HiveOutputFormat
- ros kinetic安装rbx1
- Linux(centos7)上安装最新版R3.4.1
- IE 8 下sharepoint 2013 难看的字体的解决方案
热门文章
- php删除多重数组对象属性,重新赋值的方法
- Microsoft JET Database Engine (0x80004005)
- Linux 编程中的API函数和系统调用的关系【转】
- JDBC的几种驱动
- Install MongoDB on Red Hat Enterprise, CentOS, Fedora, or Amazon Linux
- oracle日期函数2!
- js获取事件源
- 八大排序算法之五--交换排序—冒泡排序(Bubble Sort)
- Python repr() 或str() 函数(转)
- 【转】使用JDK自带jvisualvm监控tomcat