总结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制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 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程序的运行流程
2016/06/23 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
Python模块文件结构代码详解
2018/02/03 Python
python 同时运行多个程序的实例
2019/01/07 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
西式结婚主持词
2014/03/14 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
小学英语课教学反思
2016/02/15 职场文书
keepalived + nginx 实现高可用方案
2022/12/24 Servers