总结html5自定义属性有哪些


Posted in HTML / CSS onApril 01, 2020

 定义

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', '埃隆 马斯克')

到此这篇关于总结html5自定义属性有哪些的文章就介绍到这了,更多相关总结html5自定义属性有哪些内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
详解css3 object-fit属性
Jul 27 HTML / CSS
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 #HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 #HTML / CSS
详解HTML5常用的语义化标签
Sep 27 #HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 #HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 #HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 #HTML / CSS
html2canvas截图空白问题的解决
Mar 24 #HTML / CSS
You might like
PHP分页显示制作详细讲解
2006/12/05 PHP
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
详解PHP中的Traits
2015/07/29 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
Python实现数字的格式化输出
2020/08/01 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
高级销售员求职信
2013/10/25 职场文书
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
护士自我评价
2014/02/01 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
出国留学经济担保书
2014/04/01 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
女方离婚起诉书
2015/05/18 职场文书
超强台风观后感
2015/06/09 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server