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的Media Queries(跨平台设计)
Jul 27 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
HTML5的语法变化介绍
Aug 13 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
详解CSS3浏览器兼容
Dec 24 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中的phpinfo()函数
2013/06/06 PHP
php简单压缩css样式示例
2016/09/22 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
全面了解JavaScript的作用域链
2019/04/03 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
python默认参数调用方法解析
2020/02/09 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
"引用"与多态的关系
2013/02/01 面试题
计算机专业自荐信
2013/10/14 职场文书
业务经理岗位职责
2013/11/11 职场文书
摄影助理岗位职责
2014/02/07 职场文书
六个一活动实施方案
2014/03/21 职场文书
四风之害观后感
2015/06/09 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
海弦WR-800F
2022/04/05 无线电
方法汇总:Python 安装第三方库常用
2022/04/26 Python
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技