石家庄做网站,石家庄网站优化,石家庄网络推广,石家庄网络公司
当前位置:主页 > 新闻资讯 > 网站设计 >

Html5之自定义属性(data-,dataset)

发表日期:2019-12-25 14:52文章编辑:Html5教程浏览次数: 标签: Html5教程|    

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

如没特殊注明,文章均来自网络!转载请注明来自:https://www.yousouke.com/News/wzsj/702.html

网站设计案例推荐

热门新闻

HTML实现检测输入已完成功能

石家庄企业网站做好网站结构优化的重要性

石家庄网站建设:建站收费依据的标准

css代码优化的12个技巧

HTML中的if判断用法

HTML实现title 属性换行小技巧

浅谈HTML中src和href之间的区别

两个div之间有空隙的解决方法

相关新闻
推荐新闻

【石家庄网站建设】企业网页设计需要有哪些基本功?

HTML <!DOCTYPE> 标签

微信开发功能需求文档的整理思路

让2个DIV居中并排显示

DIV居中之div水平居中

css代码优化的12个技巧

Html5之自定义属性(data-,dataset)

石家庄企业网站做好网站结构优化的重要性

石家庄网站建设:建站收费依据的标准