浅析html5的dataset
前言:
很多时候,我们在操作页面某些元素的时候,需要存储一些数据,一般大家很常见的方式都会设置一些自定义属性,比如:
微博feed list里面的图片放大:
大家看到有一个自定义的key------action-data,里面存储了一些数据。
那问题来了:
- 自定义属性命名有没有规范或者标准??
- 获取自定义属性的值咋搞??
正文:
先介绍一下html5的dataset!!!!!!!
- what is the dataset?
以data-为前缀的,可以通过dataset对象来获取相关的属性值。
直接上例子吧!!!!
<a id="test" data-userName="zhangyaohun" data-user-job="fe">测试文字</a>
var test = document.getElementById("test"); console.log(test.dataset);
我们看看结果:
疑问又来了:what is the DOMStringMap??????
资料查看:http://www.w3.org/TR/html5/common-dom-interfaces.html#domstringmap-0
结论也来了:
- 首先自定义属性都会把大写转换为小写
- 出现"data-user-job",在返回的dataset对象里面就是userJob
- 在调用dataset获取的对象里面的key都是原来data-后面的
浏览器兼容性相关:
----------------------------------------------分割线-----------------------------------------------------------------------------
获取自定义属性一般采用getAttribute
dataset VS getAttribute的性能单侧:
----------------------------------------------分割线-----------------------------------------------------------------------------
感想:
其实以后再设计类似data存储和获取相关的时候,建议命名采用data-的前缀,高级浏览器采用dataset的分支
一个相关的Jquery插件:http://www.orangesoda.net/jquery.dataset.html
扩展阅读:
相关推荐
STPace 2020-05-25
tthappyer 2020-01-17
yezi 2019-11-04
Imfondof 2015-06-15
JavaJspSsh 2019-09-08
wysjwh 2019-09-06
wangnantjobj 2019-07-01
cohciz 2019-07-01
攻城师 2019-06-29
gaohongijj 2016-08-01
Misswangdapao 2016-07-16
impress 2019-06-28
wcssdu 2019-06-28
notepaper 2016-04-07
wenhuadream 2015-03-26
瞌睡虫 2011-03-20
selt 2014-08-14