HTML5规定可以为元素添加非标准型的属性，只需添加前缀data-，这些属性可以随意添加，随意命名，目的是为元素提供与渲染无关的信息，或提供语义信息。

传统获取方式 'getAttribute'

dataset属性的值是DOMStringMap的一个实例，名值对的映射。每个data-name形式的属性都有一个对应的属性，只不过该属性名没有data-前缀。

需要注意的是，data()的值进行修改并不会影响到DOM元素上的data-*属性的改变。data()的本质其实是将一个 “cache” 附加到了对象上，并使用了一个特殊的属性名称。

javaScript tips —— 标签上的data属性的更多相关文章

  1. 在VSCode中编辑HTML文档时，在Dom标签上写style属性时智能提示的问题

    首先在VSCode中打开一个HTML文件 然后点右下角的“选择语言模式” 然后点击配置HTML语言的基础设置 然后在打开的界面中(右侧) 输入如下代码 { "editor.quickSugg ...

  2. Angular学习笔记 ——input 标签上的【name属性】和【ngModelOptions属性】

    利用“@angular/forms" 创建<form>表单的时候,系统默认会创建一个”FormGroup"的对象. 使用带有“ngModel"的”<in ...

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

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

  4. JavaScript <script>标签的位置、延迟脚本（defer属性）与 异步脚本（async属性）

    一.<script>标签的位置 传统的做法是将<script>元素放在<head>元素中,例如: <!DOCTYPE html><html > ...

  5. 前端 html input标签 placeholder属性 标签上显示内容

    前端 html  input标签 的placeholder属性  标签上显示内容 <!DOCTYPE html> <html lang="en"> < ...

  6. 初学者--bootstrap（五）JavaScript插件（上）----在路上（6）

    jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...

  7. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

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

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

  9. JavaScript插件——标签页

    JavaScript插件——标签页 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html ...

随机推荐

  1. Java 7 新增功能

    Java 7 新增功能如下: 对二进制整数的支持,以0b或0B开头. 在数值中可以使用下划线,不管是整型数值,还是浮点型数值,都可以自由地使用下划线,这样可以直观地分辨数值常量中到底包含多少位.如:3 ...

  2. HMM,MEMM,CRF模型的比较

    本文参考自:http://blog.csdn.net/happyzhouxiaopei/article/details/7960876 这三个模型都可以用来做序列标注模型.但是其各自有自身的特点,HM ...

  3. windows安装redis, php5.5

    全套安装包地址 http://download.csdn.net/detail/whellote/9572797   解压 redis-2.2.5-win32-win64, 将里面的内容拷贝到j:/r ...

  4. CCProgressTimer Loading条

    CCProgressTimer *p_SpTime = CCProgressTimer::create(CCSprite::createWithSpriteFrameName("IM_Pro ...

  5. 新linux系统上rz 与sz命令不可用

    使用命令进行安装:yum install lrzsz  即可使用

  6. ODP.NET Oracle12.1版本免安装发布(IIS WebServices)

    1.ODP.NET必须的DLL OCI.DLL Oracle.DataAccess.dll OraOps12.dll msvcr100.dll oraociei12.dll oraons.dll 2. ...

  7. 设置 vadio 和checkbox是否选中

    1.js方案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 />  <title>te ...

  8. [Linux 004]——用户和用户组以及 Linux 权限管理（二）

    到权限了.前面讲到了 Linux 中的用户和用户主管理,其实它们的本质(或者用户和用户组出现的初衷)都是方便权限管理.权限管理对于计算机的重要性不言而喻,权限让每个用户能够安安心心的使用计算机,而不用 ...

  9. 20145322 《Java程序设计》第6周学习总结

    20145322 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 10.1.1 串流设计的概念 Java将输入/输出抽象化为串流,数据有来源及目的地,衔接两者的是串流对象. ...

  10. 组播的介绍以及CS模型实现

    1.组播介绍 组播组可以是永久的也可以是临时的.组播组地址中,有一部分由官方分配的,称为永久组播组. 永久组播组保持不变的是它的ip地址,组中的成员构成可以发生变化.永久组播组中成员的数量都可以是任意 ...