主页 > 知识库 > Html5之自定义属性(data-,dataset)

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

热门标签:检查注册表项 百度竞价点击价格的计算公式 硅谷的囚徒呼叫中心 网站建设 使用U盘装系统 智能手机 美图手机 阿里云

定义

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之自定义属性(data-,dataset)》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266