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. restfull规范

    web服务交互 我们在浏览器中能看到的每个网站,都是一个web服务.那么我们在提供每个web服务的时候, 都需要前后端交互,前后端交互就一定有一些实现方案,我们通常叫web服务交互方案. 目前主流的三 ...

  2. JavaWeb-HttpServletResponse对象一

    web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象,和代表响应的response对象.resquest和response对象既然代表请求和响应,那么要 ...

  3. NoSQL 数据库概览及其与 SQL 语法的比较

    NoSQL数据库的产生就是为了解决大规模数据集合多重数据种类带来的挑战,尤其是大数据应用的难题. 本文对NoSQL数据库的定义.分类.特征.当前比较流行的NoSQL数据库系统等进行了简单的介绍,并对N ...

  4. RNNs

    什么是RNN网络? RNNs背后的主要目的是要使用序列本身的顺序信息.在传统的神经网络里,我们假设输入(输出)是条件独立的.但是,在许多任务里,这是个非常非常差的假设.如果你想预测一个序列中的下一个单 ...

  5. 剑指offer-java

    面试题67 机器人的运动范围 题意: 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. ...

  6. 6 TensorFlow实现cnn识别手写数字

    ------------------------------------ 写在开头:此文参照莫烦python教程(墙裂推荐!!!) ---------------------------------- ...

  7. JVM调优之Java进程消耗CPU过高

    JVM调优之Java进程消耗CPU过高 查找问题思路 1.查看cpu使用率,发现有线程cpu占用率很高  tops 咱们拿18092线程举例示范 2.查询pid对应的进程 ps -ef|grep 18 ...

  8. Winter-1-C A + B II 解题报告及测试数据

    Time Limit:1000MS Memory Limit:32768KB Description I have a very simple problem for you. Given two i ...

  9. Redhat 7.4更新为Centos7的yum并安装docker-ce

    以下命令请在root下执行 #删除原有的yum rpm -qa|grep yum|xargs rpm -e --nodeps #install centos yum #wget http://mirr ...

  10. Submine Text 快捷键

    Ctrl+Shift+P:打开命令面板 Ctrl+P:搜索项目中的文件 Ctrl+G:跳转到第几行 Ctrl+W:关闭当前打开文件 Ctrl+Shift+W:关闭所有打开文件 Ctrl+Shift+V ...