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伪类选择器:nth-child()
Apr 02 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 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文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
js版本A*寻路算法
2006/12/22 Javascript
XENON基于JSON变种
2010/07/27 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
jQuery滑动效果实现方法分析
2018/09/05 jQuery
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
Anaconda下安装mysql-python的包实例
2018/06/11 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
对python中UDP,socket的使用详解
2019/08/22 Python
python3 mmh3安装及使用方法
2019/10/09 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
MySQL批量更新不同表中的数据
2022/05/11 MySQL