关于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中自定义属性的介绍的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

h5实现多图片预览上传及点击可拖拽控件

值得一个的5个强大的HTML5api 函数

HTML5中关于音频与视频监听器应用的示例详解

HTML5在工作中主要干什么

HTML5实现上传图片预览效果代码

简单介绍HTML5中的文件导入

如何从javascript到typescript?

分享HTML5实现弹出框的效果示例

解决h5网页中用video标签无法播放mp4视频的方法

HTML5 表单、select 下拉、textarea多行文本的介绍

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




打赏

取消

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

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

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

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

评论

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