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

2021-03-15 11:29

阅读:585

标签:字母   query   获得   cti   前缀   char   标签   jquer   nbsp   

 

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-的值就可以了。这样就非常方便我们使用了

 

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

标签:字母   query   获得   cti   前缀   char   标签   jquer   nbsp   

原文地址:https://www.cnblogs.com/shangrao/p/12797658.html


评论


亲,登录后才可以留言!