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属性选择符介绍
Oct 17 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 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代码
2006/12/06 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
jquery中对表单的基本操作代码
2010/07/29 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
Python实现翻转数组功能示例
2018/01/12 Python
Python装饰器用法示例小结
2018/02/11 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
Python读取YAML文件过程详解
2019/12/30 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
python 如何区分return和yield
2020/09/22 Python
python实现简单的学生管理系统
2021/02/22 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
大学生毕业求职的自我评价
2013/09/29 职场文书
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
教师党性分析材料
2014/02/04 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
股权转让协议范本
2014/12/07 职场文书
负责培养人意见
2015/06/05 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python