关于html5中自定义属性的介绍


本文摘自PHP中文网,作者V,侵删。

定义

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

1

2

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

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

(推荐教程:H5教程)

获取

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

1

2

3

4

5

6

7

8

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

设置

1

2

3

4

5

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

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

  

box1.dataset.name = '马斯克'

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

相关视频教程推荐:html5视频教程

以上就是关于html5中自定义属性的介绍的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5新特性之webrtc详解

如何使用HTML5 canvas绘制文字的轮廓

HTML5中常用交互元素实现的代码实例

h5移动端各种各样的列表的制作方法(五)

利用HTML5实现文件异步上传功能代码实例

h5链接的使用

h5实现桌面通知

HTML5的七大优势“逼宫”app

HTML5 canvas基本绘图之绘制矩形

基于HTML5的web跨设备超声波通信方案详解

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...