HTML5中的自定义属性总结
在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。
读写方式
data-*有两种设置方式,可以直接在HTML元素标签上书写
<div id="test" data-age="24">Click Here
</div>
其中的data-age就是一种自定义属性,当然我们也可以通过JavaScript来对其进行操作,HTML5中元素都会有一个dataset的属性,这是一个DOMStringMap类型的键值对集合
var test = document.getElementById('test');
test.dataset.my = 'Byron';
这样就为div添加了一个data-my的自定义属性,使用JavaScript操作dataset有两个需要注意的地方
- 我们在添加或读取属性的时候需要去掉前缀data-*,像上面的例子我们没有使用test.dataset.data-my = ‘Byron’;的形式。
- 如果属性名称中还包含连字符(-),需要转成驼峰命名方式,但如果在CSS中使用选择器,我们需要使用连字符格式
为刚才代码追加写内容
<style type="text/css">[data-birth-date]{background-color: #0f0;width:100px;margin:20px;}
</style>
<style type="text/css">test.dataset.birthDate = '19890615';
</style>
这样我们通过JavaScript设置了data-birth-date自定义属性,在CSS样式表为div添加了一些样式,看看效果
读取的时候也是通过dataset对象,使用”.”来获取属性,同样需要去掉data-前缀,连字符需要转化为驼峰命名
<style type="text/css">var test = document.getElementById('test');test.dataset.my = 'Byron';test.dataset.birthDate = '19890615';test.onclick = function () {alert(this.dataset.my + ' ' + this.dataset.age+' '+this.dataset.birthDate);}
</style>
getAttribute/setAttribute
有些同学可能会问这和getAttribute/setAttribute除了命名有什么区别吗,我们来看一下
var test = document.getElementById('test');
test.dataset.birthDate = '19890615';
test.setAttribute('age', 25);
test.setAttribute('data-sex', 'male');
console.log(test.getAttribute('data-age')); //24
console.log(test.getAttribute('data-birth-date')); //19890516
console.log(test.dataset.age); //24
console.log(test.dataset.sex); //male
这样我们可以看出,两者都把属性设置到了attribute上(废话,要不人家能叫自定义属性),也就是说getAttribute/setAttribute可以操作所有的dataset内容,dataset内容只是attribute的一个子集,特殊就特殊在命名上了,但是dataset内只有带有data-前缀的属性(没有age=25那个)。
那么为什么我们还要用data-*呢,一个最大的好处是我们可以把所有自定义属性在dataset对象中统一管理,遍历啊神马的都哦很方便,而不至于零零散散了,所以用用还是不错的。
HTML5中的自定义属性总结相关推荐
- HTML5新特性-自定义属性(data-set)
设么是data-set 在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放 使用data-set可以获取这些数据 实例 <div id='2' data-fo ...
- html5中api有什么,HTML5中的API概览
HTML5中的API概览 整理一下HTML5中的常见API. 前言 HTML5中提供了一些功能强大的API,在不考虑兼容性的情况下,比起原生js实现更加简单,比起jQuery可以少引入包,这里整理几个 ...
- HTML5中的data-id与id
在HTML5中增加了一项新的功能:自定义数据属性,也就是"data-*"自定义属性.在h5中通过使用data-为前缀来设置我们需要的自定义属性来进行一些数据的存放,在高级浏览器下可 ...
- html5定义页脚标签,使用 HTML5 中的新标签和新属性
新标签主要分成三个部分:语义化标签.功能性标签及新的输入控件类型 语义化标签 .. . ....... 这些新的语义化标签目前得到了大部分主流浏览器的支持,建议直接使用:如果是在IE 8及以下版本,无 ...
- html5哪个标签首字母大写,HTML5中标签和常用规则有哪些?html5标签以及规则的介绍...
这篇文章给大家介绍的内容是关于HTML5中标签和常用规则有哪些?html5标签以及规则的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1. 命名规则 [强制]class:必须单 ...
- html5代码转换为视频,HTML5中的视频代码详解
摘要 腾兴网为您分享:HTML5中的视频代码详解,智学网,云闪付,易推广,小红书等软件知识,以及360win10,流量魔盒,fitbit,上港商城,安卓2.3.7,全民惠,五年级下册英语单词表图片,t ...
- HTML5学习之二:HTML5中的表单2
(本内容部分节选自<HTML 5从入门到精通>) 对表单的验证 -------------------------------------------------------- •1.re ...
- html5 minlength,HTML5中是否有minlength验证属性?
回答(16) 3 years ago 如果想做出这种行为, 总是 show a small prefix on input field 或 the user can't erase a prefix ...
- 谈谈HTML5中的history.pushSate方法,弥补ajax导致浏览器前进后退无效的问题
移动端为了减少页面请求,有时候需要通过单页面做成多页面的效果,最近有这么个需求,表单填完后执行第一步,然后执行第二步,第二步执行完后再执行第三步,每一步都要保留之前的数据.这种情况用单页面实现再合适不 ...
最新文章
- shell中各种括号的作用
- python语言可以应用在哪些方面-Python语言的应用领域主要有哪些?
- 小店怎么做内容营销?这个家居店铺有诀窍
- 小知识—PRINCE2的七大原则之剪裁
- python编程之处理GB级的大型文件
- 西安集训B层Day1 test 问题 A: 旅行日记
- 读Thinking in Java(1~4)
- 敏感词库快速添加到mysql数据库,并在页面使用方法过滤敏感词
- ADB命令和Monkey命令
- AUTOCAD——线宽设置
- 域名注册绑定内网穿透项目部署
- recyclerView的滑动
- python爬京东联盟_Python爬取京东商品数据
- 快过年了用Python抢红包
- 我心里优秀架构师是怎样的?
- 服务器应用程序不可用解决方案!
- mysql 实现yyyyww,在java中有YYYYWW格式吗
- libnice linux编译流程
- Java计算机毕业设计电影网站系统设计源码+系统+数据库+lw文档
- TEB算法-debug
热门文章
- python读取lmdb文件_如何使用python創建LMDB文件
- Shell 计算两个数的加减乘除取余(+、-、*、\、/)
- Shell生成随机mac地址
- golang操作mysql数据库(Go-SQL-Driver/MySQL)
- 设置防火墙规则,防止因为TCP第三次握手,系统自动返回包
- 排序算法:堆排序算法实现及分析
- [TJOI2015]弦论 后缀自动机
- [daily] fedora用过光盘做dnf repo
- Centos6.7系统环境下使用 yum install 安装mysql-community-5.7.22(史上最简)
- shell命令总结一