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动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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下过滤HTML代码的函数
2007/12/10 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python任务调度实例分析
2015/05/19 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
django框架如何集成celery进行开发
2017/05/24 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
学生手册家长评语
2014/02/10 职场文书
爱之链教学反思
2014/04/30 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
余世维讲座观后感
2015/06/11 职场文书