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. Linux vim编辑器常用命令

    Vim是一个类似于Vi的著名的功能强大.高度可定制的文本编辑器 常用的vim命令如下图 补充: num+命令 对命令执行num次,如  5dd:剪切一行 * 5  即剪切5行,其它如此 /text   ...

  2. java-mybaits-00501-案例-映射分析-订单商品数据模型

    1.数据模型分析思路 1.每张表记录的数据内容          分模块对每张表记录的内容进行熟悉,相当 于你学习系统 需求(功能)的过程. 2.每张表重要的字段设置          非空字段.外键 ...

  3. ReSharper Ultimate 2017 下载地址及破解方法

    https://download.jetbrains.8686c.com/resharper/JetBrains.ReSharperUltimate.2017.1.2.exe 安装完成后,打开vs   ...

  4. maven+springmvc+spring+mybatis

    一.项目搭建 1)创建maven项目 选择apache的maven-archetype-webapp 填入groupID : 例如 com.mracale artifactId :例如 shoppin ...

  5. Ubuntu 16.04 源码编译安装PHP7+swoole

    备注: Ubuntu 16.04 Server 版安装过程图文详解 Ubuntu16镜像地址: 链接:https://pan.baidu.com/s/1XTVS6BdwPPmSsF-cYF6B7Q 密 ...

  6. SDUT3146：Integer division 2（整数划分区间dp)

    题目:传送门 题目描述 This is a very simple problem, just like previous one. You are given a postive integer n ...

  7. 在PL/SQL中如何让程序暂停几秒钟

    在编写PL/SQL中,有时需要程序中暂停几秒钟再继续执行,查了一下,oracle内置有这个功能dbms_lock.sleep(10):不过dbms_lock包需要用户自己安装,演示如下: C:\Doc ...

  8. execute sp_executesql 用变量获取返回值

    execute sp_executesql 用变量获取返回值 1,EXEC的使用 2,sp_executesql的使用 MSSQL为我们提供了两种动态执行SQL语句的命令,分别是EXEC和sp_exe ...

  9. jquery模拟点击A标签的问题

    我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久. 先看下边的代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <htm ...

  10. 03 linux命令的操作

    开启Linux操作系统,要求以root用户登录GNOME图形界面,语言支持选择为汉语 使用快捷键切换到虚拟终端2,使用普通用户身份登录,查看系统提示符 使用快捷键切换到虚拟终端5,使用管理员身份登录, ...