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 相关文章推荐
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
再说下636单管机
2021/03/02 无线电
PHP扩展CURL的用法详解
2014/06/20 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
Django实现全文检索的方法(支持中文)
2018/05/14 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Python如何生成xml文件
2020/06/04 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
装潢设计专业推荐信模板
2013/11/26 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
六五普法宣传标语
2014/10/06 职场文书
青春雷锋观后感
2015/06/10 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书