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-* 属性的含义和使用的更多相关文章

  1. ajaxSubmit的data属性

    https://www.cnblogs.com/shiyou00/p/6841801.html js-art-template 修改一处代码的时候发现了让我疑惑的地方.ajaxSubmit的data用 ...

  2. JS组件系列——使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...

  3. 【wpf】Path画扇形以及Path的Data属性的理解

    <Path x:Name="PathFillColor" Fill="{TemplateBinding Property=Button.Background}&qu ...

  4. HTML data属性简介以及低版本浏览器兼容算法

    实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...

  5. data属性

    本框架内置组件以及部分插件可以通过data属性来初始化并使用,通常通过data-toggle来调用API(toggle是触发器的意思,例如我们创建一个navtab标签可以通过为a的data-toggl ...

  6. HTML 5：你必须知道的data属性

    原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性 译者:dwqs HTML 5的Data属性可 ...

  7. Meta标签中的属性及含义

    一.Meta标签中的format-detection属性及含义 format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的forma ...

  8. Intent的属性及Intent-filter配置——实例Action、Data属性启动系统Activity

    一旦为Intent同时指定了Action.Data属性,那么Android将可根据指定的数据类型来启动特定的应用程序,并对指定数据类型执行相应的操作. 下面是几个Action属性.Data属性的组合. ...

  9. Bootstrap入门（二十四）data属性

    Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...

  10. 关于Meta标签中format-detection属性及含义

    一.Meta标签中的format-detection属性及含义 意为:格式检测 或许你会有这样的经历:当你在制作手机端的页面中,点击了没有加任何链接的格式的数字时,这时手机会进行自动拔号提示操作! 禁 ...

随机推荐

  1. 【Java】FlowControl 流程控制

    FlowControl 流程控制 什么是流程控制? 控制流程(也称为流程控制)是计算机运算领域的用语,意指在程序运行时,个别的指令(或是陈述.子程序)运行或求值的顺序. 不论是在声明式编程语言或是函数 ...

  2. 深度解密 Go 语言之 sync.Pool

    最近在工作中碰到了 GC 的问题:项目中大量重复地创建许多对象,造成 GC 的工作量巨大,CPU 频繁掉底.准备使用 sync.Pool 来缓存对象,减轻 GC 的消耗.为了用起来更顺畅,我特地研究了 ...

  3. Python导出数据到Excel表格-NotImplementedError: formatting_info=True not yet implemented

    在使用Python写入数据到Excel表格中时出现报错信息记录:“NotImplementedError: formatting_info=True not yet implemented” 报错分析 ...

  4. Python 分析后告诉你闲鱼上哪些商品抢手？

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:[Airpython] PS:如有需要Python学习资料的小伙伴可以 ...

  5. 1/13 update

    小组这几天的update大多都集中在UI方面: 答题界面更改了 放弃和提交按钮: 结果界面进行了颜色的调整,其中没有wordToAdd成员的不现实增加到单词本按钮: 分享结果增加APP的连接:

  6. 提高万恶的KPI，切忌要避开这六个低效的编程习惯

    作者:程序员小跃 Slogan:当你的才华还无法撑起你的野心时,那应该静下心来好好学习 上次的翻译,引起了很大的反响,大家都想知道自己和高级工程师的差距,看了我的文章,是不是都在默默地做着比较呢?如果 ...

  7. 【08NOIP提高组】笨小猴

    笨 小 猴 来自08年NOIP提高组的第一题 1.题目描述 [题目描述] 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头痛.经实验证明,用这种方法去选择选项的时候选对的几率非常大!这种方法的具体 ...

  8. WEBMIN（CVE-2019-15107） 学习

    简单介绍: Webmin是目前功能最强大的基于Web的Unix系统管理工具.管理员通过浏览器访问Webmin的各种管理功能并完成相应的管理动作.目前Webmin支持绝大多数的Unix系统,这些系统除了 ...

  9. PyTorch中在反向传播前为什么要手动将梯度清零？

    对于torch中训练时,反向传播前将梯度手动清零的理解 简单的理由是因为PyTorch默认会对梯度进行累加.至于为什么PyTorch有这样的特点,在网上找到的解释是说由于PyTorch的动态图和aut ...

  10. python信息收集（四）

        在前三篇中,我们介绍了使用python脚本发现二层.三层的主机设备,接下来我们介绍使用python发现第四层主机.     在TCP/IP协议中,第四层为传输层,主要使用的通信协议为TCP协议 ...