北京国炬信息技术有限公司

  • 首页
  • 产品方案
    • 低代码平台
    • 流程设计器
    • 微服务方案
    • 表单设计器
    • 大屏设计器
    • 报表设计器
    • 流程数据中台
    • 移动APP方案
  • 新闻动态
    • 公司动态
    • 技术博客
    • 学习视频
  • 关于我们
    • 公司简介
    • 发展历程
    • 公司荣誉
    • 联系我们
  • 人才招聘
首页 > 新闻动态 > 公司动态

HTML5中的自定义属性总结

作者:admin 发布时间:2021-12-26 点击数:

在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

读写方式 data-*有两种设置方式,可以直接在HTML元素标签上书写

<div id="test" data-age="24">
  Click Here
</div>

其中的data-age就是一种自定义属性,当然我们也可以通过JavaScript来对其进行操作,HTML5中元素都会有一个dataset的属性,这是一个DOMStringMap类型的键值对集合

var test = document.getElementById('test');
test.dataset.my = 'Byron';

这样就为div添加了一个data-my的自定义属性,使用JavaScript操作dataset有两个需要注意的地方

  • 我们在添加或读取属性的时候需要去掉前缀data-*,像上面的例子我们没有使用test.dataset.data-my = ‘Byron’;的形式。

  • 如果属性名称中还包含连字符(-),需要转成驼峰命名方式,但如果在CSS中使用选择器,我们需要使用连字符格式

为刚才代码追加写内容

<style type="text/css">
    [data-birth-date]
    {         
        background-color: #0f0;         
        width:100px;         
        margin:20px;
    }
</style>
<style type="text/css">
    test.dataset.birthDate = '19890615';
</style>

这样我们通过JavaScript设置了data-birth-date自定义属性,在CSS样式表为div添加了一些样式,看看效果

HTML5中的自定义属性总结(图1) 

HTML5中的自定义属性总结(图2)

读取的时候也是通过dataset对象,使用”.”来获取属性,同样需要去掉data-前缀,连字符需要转化为驼峰命名

<style type="text/css">   
   var test = document.getElementById('test');
   test.dataset.my = 'Byron';
   test.dataset.birthDate = '19890615';
   test.onclick = function () {
     alert(this.dataset.my + ' ' + this.dataset.age+' '+this.dataset.birthDate);
   }
</style>

HTML5中的自定义属性总结(图3)

getAttribute/setAttribute 有些同学可能会问这和getAttribute/setAttribute除了命名有什么区别吗,我们来看一下

var test = document.getElementById('test');
test.dataset.birthDate = '19890615';
test.setAttribute('age', 25);
test.setAttribute('data-sex', 'male');
console.log(test.getAttribute('data-age')); //24
console.log(test.getAttribute('data-birth-date')); //19890516
console.log(test.dataset.age); //24
console.log(test.dataset.sex); //male

HTML5中的自定义属性总结(图4) HTML5中的自定义属性总结(图5)

这样我们可以看出,两者都把属性设置到了attribute上(废话,要不人家能叫自定义属性),也就是说getAttribute/setAttribute可以操作所有的dataset内容,dataset内容只是attribute的一个子集,特殊就特殊在命名上了,但是dataset内只有带有data-前缀的属性(没有age=25那个)。

那么为什么我们还要用data-*呢,一个最大的好处是我们可以把所有自定义属性在dataset对象中统一管理,遍历啊神马的都哦很方便,而不至于零零散散了,所以用用还是不错的。


本文转载自:https://blog.csdn.net/qq_27674439/article/details/90696837

加入收藏
上一篇:JeecgBoot集成Sharding-JDBC
下一篇:【快讯】JeecgBoot低代码平台,成功入选2021科创中
返回列表

随便看看

  • JeecgBoot老版本2.x 3.x 如何集成积木报表?
  • 【重磅】JimuReport 积木报表 v2.0 版本发布,免费可视化报表
  • 2022国内低代码平台厂商排行榜—经典收藏
  • 《中华人民共和国著作权法》全文(2021.6.1起施行)
  • JimuReport v1.5.6版本发布—免费的可视化低代码报表
  • 『开源资讯』JimuReport积木报表 v1.6.6 版本发布—免费报表工具
  • 拖拽报表设计香不香—JimuReport 1.4.0新特性
  • 国内互联网大厂开源github开源项目主页和开源贡献排名
  • 制作打印报表费时费力?积木报表帮你轻松搞定—医院体检项目实战
  • JEECG、JEEWX获2014年Git最热门50项目

  • 公司产品
  • JeecgBoot低代码平台
  • 敲敲云零代码
  • 大屏设计器
  • 流程设计器
  • 表单设计器
  • 源码下载
  • JeecgBoot低代码平台
  • 积木报表平台
  • 移动开发平台
  • 微信管家平台
  • 更多信息
  • JEECG官方论坛
  • JEECG插件市场
  • 仪表盘设计器
  • 积木报表官网
  • 联系我们
  • 中国·北京·朝阳区科荟前街1号院奥林佳泰大厦9层
  • 商务QQ: 69893005、418799587
  • 商务热线: 010-64808099(5*8小时)
  • 项目外包: 18611788525(5*8小时)
  • 扫码关注我们
Copyright © 2015 北京国炬软件 All Rights Reserved Powered by JEECG 京ICP备2023027727号