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中的border-radius属性
Aug 18 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
php 字符串函数收集
2010/03/29 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
python计算方程式根的方法
2015/05/07 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
python测试mysql写入性能完整实例
2018/01/18 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
对于Python深浅拷贝的理解
2019/07/29 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
知识竞赛活动方案
2014/02/18 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
党务公开方案
2014/05/06 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
股东授权委托书范本
2014/09/13 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python