HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)


Posted in HTML / CSS onAugust 24, 2017

HTML5规定可以为元素添加非标准的属性,但要添加前缀 data- ,目的是为元素提供与渲染无关的信息,或者提供语义信息。这些属性可以任意添加、随便命名,只要以 data- 开头即可添加了自定义属性之后,可以通过元素的 dataset 属性来访问自定义属性的值。

<div id="box" data-name='ghostwu' data-age='22' , data-sex='man'>ghostwu tell you how to learn html5</div>
    <script>
        var oBox = document.querySelector("#box");
        console.log( oBox.dataset ) ;
        var myName = oBox.dataset.name;
        var myAge = oBox.dataset.age;
        var mySex = oBox.dataset.sex;
        if( oBox.dataset.name ) {
            console.log( oBox.dataset.name );
        }
    </script>

总结

以上所述是小编给大家介绍的HTML5自定义属性前缀data及dataset的使用方法(html5 新特性),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
CSS3教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 HTML / CSS
HTML5中的拖放实现详解
Aug 23 #HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 #HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 #HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 #HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 #HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 #HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 #HTML / CSS
You might like
php面向对象的方法重载两种版本比较
2008/09/08 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
为Python的web框架编写前端模版的教程
2015/04/30 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
详解python调度框架APScheduler使用
2017/03/28 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
python绘制直线的方法
2018/06/30 Python
Python正则表达式和元字符详解
2018/11/29 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Python while true实现爬虫定时任务
2020/06/08 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
毕业生个人求职信范例分享
2013/12/17 职场文书
会计学生自我鉴定
2014/02/06 职场文书
怎样写辞职信
2015/02/27 职场文书
党支部意见范文
2015/06/02 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
浅析Python中的套接字编程
2021/06/22 Python