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实现图片遮罩效果代码
Apr 09 HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 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
我的论坛源代码(十)
2006/10/09 PHP
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
深入理解令牌认证机制(token)
2019/08/22 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
python服务器端收发请求的实现代码
2014/09/29 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
python web基础之加载静态文件实例
2018/03/20 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
python多线程同步之文件读写控制
2021/02/25 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
知识竞赛活动方案
2014/02/18 职场文书
捐助倡议书范文
2014/04/15 职场文书
爱与责任演讲稿
2014/05/20 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
评职称个人总结
2015/03/05 职场文书
2015年三万活动总结
2015/03/25 职场文书
网络营销实训总结
2015/08/03 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
python单元测试之pytest的使用
2021/06/07 Python