Html5之自定义属性(data-,dataset)


Posted in HTML / CSS onNovember 19, 2019

定义

H5为我们提供了以 "data-" 为前缀定义需要的属性即可设置自定义属性

<div id="box1" data-name="Musk"></div>
<div id="box2" data-full-name="Elon Musk"></div>

获取

使用H5自定义属性对象dataset来获取

let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');

box1.dataset.name // Musk
box2.dataset.fullName // Elon Musk (驼峰)

box1.getAttribute('data-name') // Musk
box2.getAttribute('data-full-name') // Elon Musk

设置

let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');

box1.dataset.name = '马斯克'
box2.setAttribute('data-full-name', '埃隆 马斯克')

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 #HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 #HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 #HTML / CSS
iframe跨域的几种常用方法
Nov 11 #HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 #HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 #HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 #HTML / CSS
You might like
php无序树实现方法
2015/07/28 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
Python学习笔记之常用函数及说明
2014/05/23 Python
python字符串的方法与操作大全
2018/01/30 Python
Python定时任务sched模块用法示例
2018/07/16 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
前台文员个人求职信范文
2014/01/05 职场文书
庆八一活动方案
2014/01/25 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
三孔导游词
2015/02/05 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
学术会议开幕词
2016/03/03 职场文书
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js