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. J.U.C Atomic(一)CAS原理

    CAS概念 CAS:Compare And Swap,比较并交换.java.util.concurrent包完全是建立于CAS机制之上的. CAS原理 Java CAS是通过调用Unsafe的nati ...

  2. Jmeter(一)http接口添加header和cookie

    HTTP信息头管理器在Jmeter的使用过程中起着很重要的作用,通常我们在通过Jmeter向服务器发送http请求(get或者post)的时候,往往后端需要一些验证信息,比如说web服务器需要带过去c ...

  3. HDU5003:Osu!(签到题)HDU5038:(签到题,题意很坑)

    HDU 5003 水题,直接上代码(因为题意读错了,WA了一遍). #include <iostream> #include <string.h> #include <s ...

  4. HDU1115&&POJ1385Lifting the Stone(求多边形的重心)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1115# 大意:给你个n,有n个点,然后给你n个点的坐标,求这n个点形成的多边形的重心的坐标. 直接套模 ...

  5. Go实现查找目录下(包括子目录)替换文件内容

    [功能] 按指定的目录查找出文件,如果有子目录,子目录也将进行搜索,将其中的文件内容进行替换. [缺陷] 1. 没有过滤出文本文件 2. 当文件过大时,效率不高 [代码] package main i ...

  6. Android ExpandableListActivity

    ======MainActivity.java===================================== package com.zys.myexpandablelistactivit ...

  7. @Transactional(rollbackFor=Exception.class)的使用

    转载: java阿里巴巴规范提示:方法[edit]需要在Transactional注解指定rollbackFor或者在方法中显示的rollback. 先来看看异常的分类 error是一定会回滚的 这里 ...

  8. exec-maven-plugin配置及使用

    背景: 如果你想在项maven生命周期内,运行一段java代码,或者一段独立的程序,或者说我们所指的预执行,初始化某些值,生成某些不能预先生成的文件.那么这样我们就可以使用exec-maven-plu ...

  9. Mysql 数据类型及选择原则

    MySQL中的数据类型大的方面来分,可以分为:日期和时间.数值,以及字符串.下面就分开来进行总结. 数据库类型的选择对数据库的性能影响很大 1 . 数据类型会影响存储空间的开销 2 . 数据类型会影响 ...

  10. tomcat源码调试

    三.tomcat目录结构 tomcat的下载安装有很多教程,不再赘述. 现在的tomcat已经到9了,当tomcat下载安装完成后,其目录大致如下:     除了上面的文件夹,还有四个文件:     ...