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制作3D效果文字具体实现样式
May 02 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
php 生成短网址原理及代码
2014/01/23 PHP
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
python+mysql实现简单的web程序
2014/09/11 Python
跟老齐学Python之for循环语句
2014/10/02 Python
python计算N天之后日期的方法
2015/03/31 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
linux环境下Django的安装配置详解
2019/07/22 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python实发邮件实例详解
2019/11/11 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
python Xpath语法的使用
2020/11/26 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
开工典礼策划方案
2014/05/23 职场文书
数学教研活动总结
2014/07/02 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
三峡人家导游词
2015/01/31 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
电影雨中的树观后感
2015/06/15 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP