HTML5 自定义data标签

最新推荐文章于 2024-05-19 13:19:14 发布
最新推荐文章于 2024-05-19 13:19:14 发布
阅读量501 收藏 1
点赞数
分类专栏： HTML5 html 文章标签： html5 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pangchengyong0724/article/details/52021842
版权
HTML5 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
html
12 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 自定义data标签</title>
    <style>  
        .ui_header {  
          background-color: black;  
          text-align: center;  
          color:white;  
          border:1px solid #000;  
        }  
    </style>  
</head>
<body>
    <div data-chb="header">  
        <h1>我是使用了data-chb自定义属性的div</h1>  
    </div>  
    <br/>  
    <div>  
        我没有使用data-chb自定义属性，该怎么展现就怎么展现；  
    </div>  
</body>
</html>
 <script type="text/javascript">  
  window.onload=function(){  
    var elems = document.getElementsByTagName("div");  
    if(elems!=null&&elems.length>0){  
      var length = elems.length;  
      //遍历所有DIV控件  
      for(var i=0;i<length;i++){  
        var elem = elems[i];  
        //获取该控件的自定义属性  
        var customAttr = elem.dataset.chb;  
        //也可以通过如下方式获得自定义属性  
        //var customAttr = elem.dataset["chb"];  
        //如果是我们预先定义好的header值，表示需要处理  
        if(customAttr=="header"){  
          //添加样式  
          elem.setAttribute("class","ui_header");  
        }  
      }  
    }  
  }  
</script>
执着更专业
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
@Data标签的使用
长安明月的博客
12-17 1151
Java 类上面添加 @Data，可以省去 setter 与 getter、toString 方法的书写，在编译时，会自动添加到class中。 idea 安装 lombok 插件，步骤见 @Slf4j 标签的使用 Java 类如下： package com.test.entity; import lombok.Data; /** * @description * @date 2019/12...
html标签属性中加data,巧用 HTML5 data 属性
weixin_42298373的博客
05-31 1449
kea-socket-tr-fs8.png巧用 HTML5 data 属性HTML 5 之前，需要使用其他的数据时，是非常糟糕的。为了使一切正常有效，你不得不将数据填充到 rel 或 class 属性。有些开发者，甚至创建自己的自定义属性。自从 HTML5 自定义 data 属性出现，你可以存储任意数据，通过一种简单，符合标准的方式。1、如何使用 data 属性呢？一个 data 属性，本质就是：...
JS组件系列——使用HTML标签的data属性初始化JS组件
weixin_34072857的博客
01-26 119
前言：最近使用bootstrap组件的时候发现一个易用性问题，很多简单的组件初始化都需要在JS里面写很多的初始化代码，比如一个简单的select标签，因为仅仅只是需要从后台获取数据填充到option里面，可是从后台取数据就需要js的初始化，所以导致页面初始化的时候js的初始化代码里面出现很多重复的代码，看着很闹心。于是想起bootstrap table里面的data属性来，如果能够直接在html里...
HTML标签data-属性的作用
最新发布
hexadecimal_001的博客
05-19 312
这些数据属性可以帮助开发者在不使用全局变量的情况下，将数据与特定的HTML元素关联起来，从而实现更加模块化和可维护的代码。在上面的例子中，我们给按钮元素添加了一个data-message属性，值为"Hello, World!接下来，我们可以使用JavaScript来获取这个data-属性的值，并在点击按钮时显示提示消息。这样，我们就成功地使用data-属性存储了自定义数据，并在JavaScript中访问和使用它。我们可以使用data-属性来存储这个提示消息，并在JavaScript中访问和显示它。
html5标签的data-*属性用法简单介绍
weixin_34409703的博客
03-01 664
此属性是html5新增的属性。使用它可以存储用户自定的属性。 使用javascript可以访问这些自定义的属性。 语法结构: 1 <element data-*="somevalue"> 语法规范如下: 1.属性名称不能够有大写字母。 2.属性名称分为两个部分，"data-"是固定的前缀，后面是任意合法的...
HTML5中的data-
qq_45715615的博客
03-13 2475
data-* 属性用于存储页面或应用程序的私有自定义数据。 data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。 存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。 data-* 属性包括两部分： 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符 属性值可以是任意字符串 注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。 ...
详解HTML5 data-* 自定义属性
12-30
而且关于Attribute和Property的区别也让人十分头痛，在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义...
HTML5如何添加自定义标签属性(data-自定义属性).zip
01-10
HTML5如何添加自定义标签属性(data-自定义属性).zip
HTML5自定义视频播放器
12-28
video对象 兼容性写法 <video controls> ...video 标签 width height autoplay muted poster带有预览图（海报图片）的视频播放器 <video src='data/demo.mp4' muted controls autoplay
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
09-28
HTML5的自定义data-*属性是为了在HTML标签中存储额外的数据而引入的，这使得开发者能够在不违反HTML规范的情况下，方便地在DOM元素上附加信息。这些属性的名称以"data-"开头，允许开发者自由定义其后的部分，例如...
html 标签data-*
计算机技术大学习
08-31 809
html中的标签带一些数据 例如 菊花台 这个标签中就带了一些数据，如作者，长度等...你想要加入的一些数据 在jquery中的用法： $('.author').click(function(){ var author = $(this).attr('data-author'); //这就获取了标签中之前设定的author了 }); 些的比较简单，如有不明白
【Android笔记】隐式Intent中<data>标签详解
我很菜
03-12 3886
说明：上一篇笔记我们有写到调用Intent的setData()方法去启动系统自带的浏览器和拨号面板。 这篇笔记我们主要是详细记录一下关于data标签的知识。 setData()方法接收一个Uri对象，主要用于指定当前Intent正在操作的数据，而这些数据通常都是以字符串的形式传入Uri.parse()方法中解析产生的。（这句话我也是从书上抄的） Data标签的属性 除了...
jQuery的 .data()方法和html标签的data-* 属性
hello PHP的博客
12-29 1568
html> html> head> style> div { color: blue; } span { color: red; } style> script src="jquery-3.2.1.js">script> head> body> div data
@Data 使用
yake1965
06-15 727
像 lombok 这种插件，已经不仅仅是插件了，它在编译器编译时通过操作 AST（抽象语法树）改变字节码生成，变相的说它就是在改变 java 语法，它改变了你编写源码的方式，它不像 spring 的依赖注入一样是运行时的特性，而是编译时的特性。如果一个项目有非常多这样的插件，会极大的降低阅读源代码的舒适度。此时 Lombok 就对第一步骤得到的 AST 进行处理，找到 @Data 注解所在类对应的语法树（AST），然后修改该语法树（AST），增加getter 和 setter 方法定义的相应树节点。
Android LomBok的使用
八归少年
10-15 9098
Lombok Lombok项目是一个Java库，它会自动插入您的编辑器和构建工具中，从而为您的Java增光添彩。 永远不要再写另一个getter或equals方法，带有一个注释的您的类有一个功能全面的生成器，自动化您的日志记录变量等等。通过使用对应的注解，可以在编译源码的时候生成对应的方法，减少模板代码的编写，极大提升开发效率。 GitHub地址：https://projectlombok.o...
标签中的data-属性有什么用
baby的专栏
05-10 6150
LZQ大神和我说用class和id不够好，要用data-role和 data-action
html自定义data,html自定义data属性(示例代码)
weixin_28931449的博客
07-02 545
可以在HTML标签上添加任意以"data-"开头的属性，这些属性页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。例子：test data如何读取自定义data属性数据呢？jquery已经有现成的方法：var myData = $(".my-data")data("category");//这样就能返回对应的值你也可以在data-*属性中使用json语法：例如：你可以通过js...
Lombok中@Data注释的使用
weixin_51451545的博客
06-14 1862
在上面的代码中，使用@Data注释对User类进行注释，它会自动生成User类的getter和setter方法、toString方法、equals方法和hashCode方法。使用@Data注释可以使代码更加简洁明了，减少冗余的getter和setter方法的编写，提高开发效率。除了@Data注释外，Lombok框架还提供了其他常用的注释标签，例如@Getter、@Setter、@ToString、@EqualsAndHashCode等，它们都可以帮助开发者更快捷地编写出高质量的JavaBean类。
@Data 是什么？
anguang1973的专栏
05-10 381
其中，@Data注解整合了Getter、Setter、ToString、EqualsAndHashCode和RequiredArgsConstructor注解的功能，可以快速构建包含这些功能的类。Lombok通过使用注解来自动生成常见的代码，如getter和setter方法、构造函数、equals和hashCode方法等，以减少开发者的重复劳动。在编译过程中，Lombok会根据这些注解自动生成对应的代码，减少代码中的冗余和样板代码，提高代码的可读性、简洁性和可维护性。注解提供了最全面的功能。
HTML5参考手册：标签、属性与事件
HTML5新增了如`data-*`这样的自定义数据属性，用于存储页面相关的数据。 3. **HTML事件属性**：这些属性允许通过JavaScript响应用户的交互，如`onclick`, `onmouseover`, `onkeydown`等。HTML5引入了新的事件属性，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值