关于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中overflow是什么意思

详解7款绚丽的jquery/HTML5动画及源码

HTML5如何在手机端调用相机?

HTML5如何制作一份邀请函?制作邀请函的方法(代码示例)

概述HTML5的强大与未来发展

HTML5新特性有哪些

关于h5的pushstate和replacestate的用法分析

HTML5实现下雪效果的实例代码分享

炫酷实用的jquery/HTML5菜单图文详解

h5 canvas api中drawimage(图像进行缩放或裁剪)的使用实例

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




打赏

取消

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

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

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

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

评论

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