HTML data-* 属性的含义和使用 

 

data-*自定义数据属性

首先讲一下语法格式： data-* =“值”

data-* 属性包括两部分：

  • 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
  • 属性值可以是任意字符串

其实data-*加在标签里并没有任何含义，只不过，起到一个存放值的一个方式。

在jQuery中，有一个专门的方法可以获得data-的值：data(参数) ，此方法参数为 data- 后面的内容，就可以得到值了

ps:JavaScript也可以得到值，用获得属性方法就可以了

<div data-bgcolor = "red" id="bg">            
 </div>
        <script type="text/javascript">
            $(function(){                
                var a=$("#bg").data("bgcolor")                
                alert(a)   //弹出一个red                    
            })
        </script>

重点来了，我们要去获得data- 值干什么呢？其实就是要拿data- 的值去赋值

比如我此时的div写red的值，应该能猜出来我想让这个div变红色吧。

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <style type="text/css">
        div{
            width: 100px;
            height: 100px;
        }
        </style>
    </head>
    <body>
        <div data-bgcolor = "red" id="bg">
            
        </div>
        <script type="text/javascript">
            $(function(){
                
                var a=$("#bg").data("bgcolor")
                
                
                $("#bg").css("background-color",a)
                
            })
        </script>
    </body>
</html>
复制代码

这样我们就可以实现对data- 的应用。data- 的值还可以放图片路径等一系列字符串，在标签上添加data-属性也方便我们能够直观的去看和修改内容了.

比如我想让div去变成蓝色，不需要去css文件里去修改，也不需要去js文件去修改，如果css和js文件内容非常多的话就很麻烦了。但是在HTML找到对应标签，修改data-的值就可以了。这样就非常方便我们使用了

 

posted @   三线码工  阅读(2793)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示