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的定位页面元素
Aug 29 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 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取得字符串首字母的方法
2015/03/25 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
python中的列表推导浅析
2014/04/26 Python
详解python中的 is 操作符
2017/12/26 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
物业工作计划书
2014/01/10 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
工作所在部门证明
2014/09/21 职场文书
2014年文员工作总结
2014/11/18 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
道歉短信大全
2015/05/12 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
我的长征观后感
2015/06/09 职场文书
python实现A*寻路算法
2021/06/13 Python
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android