HTML5 dataset All In One

dataset

https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset#Name_conversion

<!-- DOM & dataset -->

<button data-unique-id="007"> click me get the button's id!</button>

<!-- camelCase to dash-style conversion  -->


const log = console.log;

const btn = document.querySelector(`[data-unique-id="007"]`);

// ️ dash-style to camelCase conversion

const uid = btn.dataset.uniqueId;

log(`button unique id =`, uid);

DOMStringMap

https://developer.mozilla.org/en-US/docs/Web/API/DOMStringMap

CSS attr() & HTML5 dataset

https://developer.mozilla.org/en-US/docs/Web/CSS/attr()

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes



article::before {

  content: attr(data-parent);

}


<article

  id="electric-cars"

  data-columns="3"

  data-index-number="12314"

  data-parent="cars">

...

</article>

CSS Functions

CSS 函数

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions

dataset & data-* attributes

https://caniuse.com/dataset

refs

https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset#Name_conversion

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

HTML5 dataset All In One的更多相关文章

  1. HTML5自定义属性对象Dataset简介

    一.html5 自定义属性介绍 我之前翻译的“你必须知道的28个HTML5特征.窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设 ...

  2. Html5 dataset--自定义属性

    dataset--自定义属性 HTMLElement.dataset data-*属性集 元素上保存数据 <div id="user" data-id="12345 ...

  3. HTML5 自定义属性 data-* 和 jQuery.data 详解

    新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得dat ...

  4. HTML5 自定义属性 data-*介绍

    在HTML5之前HTML4我们也可以自定义属性通过setAttribute去设置或者直接写在HTML标签里面那么HTML5新增data-*(*可以替换成你喜欢的任意名字)属性有什么用呢? 更便的捷操作 ...

  5. 使用 HTML5 & CSS 实现一个自定义开关按钮 switch button

    使用 HTML5 & CSS 实现一个自定义开关按钮 switch button switch button <div class="switch"> < ...

  6. imagepool前端图片加载管理器(JavaScript图片连接池)

    前言 imagepool是一款管理图片加载的JS工具,通过imagepool可以控制图片并发加载个数. 对于图片加载,最原始的方式就是直接写个img标签,比如:<img src="图片 ...

  7. Jsoup 使用教程：数据抽取

    1.使用DOM方法来遍历一个文档 问题 你有一个HTML文档要从中提取数据,并了解这个HTML文档的结构. 方法 将HTML解析成一个Document之后,就可以使用类似于DOM的方法进行操作.示例代 ...

  8. jQuery源码解读 - 数据缓存系统：jQuery.data

    jQuery在1.2后引入jQuery.data(数据缓存系统),主要的作用是让一组自定义的数据可以DOM元素相关联——浅显的说:就是让一个对象和一组数据一对一的关联. 一组和Element相关的数据 ...

  9. 使用 jsoup 解析HTML

    // 参考资料: // http://www.jb51.net/article/43485.htm @Test public void AnalysisHTMLByString() { String ...

随机推荐

  1. 转 Fiddler2 下断点修改HTTP报文

    文章转自:https://www.cnblogs.com/zhengna/p/10861893.html 一 Fiddler中设置断点修改HTTP请求 方法1:全局断点.Rules-->Auto ...

  2. python 9学习 高级特性

    高级特性 掌握了Python的数据类型.  语句      和函数,基本上就可以编写出很多有用的程序了. 比如构造一个1, 3, 5, 7, ..., 99的列表,可以通过循环实现: L = [] n ...

  3. ModelArts 与HiLens Kit联合开发丨行人社交距离风险提示Demo

    摘要:本Demo使用YOLOv3_Resnet18模型来检测的视频流中的行人,获取行人坐标(即图中蓝色方框),然后计算所有检测到的人之间的相互"距离". 前情提要 听到行人社交距离 ...

  4. Spark JDBC方式连接MySQL数据库

    Spark JDBC方式连接MySQL数据库 一.JDBC connection properties(属性名称和含义) 二.spark jdbc read MySQL 三.jdbc(url: Str ...

  5. GeoMesa,整体架构,创建Schema并导入数据

    GeoMesa,整体架构,创建Schema并导入数据 一.GeoMesa-整体架构 二.GeoMesa-创建Schema并导入数据 2.1 GeoTools Data 模块 2.2 索引管理 2.3 ...

  6. OpenStack (neutron 网络服务）

    neutron介绍 提供 OpenStack 虚拟网络服务,也是 OpenStack 重要的核心模块之一,该模块最开始是 Nova 的一部分,叫 nova-network,后来从 Nova 中分离出来 ...

  7. 读取固定ResourceBundle

    private static ResourceBundle ssoBundle = ResourceBundle.getBundle("CASHHSSO");//默认根目录 pub ...

  8. 存储过程demo返回银行名称

    create or replace procedure TEST_NUMO(Cityno IN VARCHAR2,--输入参数 Deptid IN VARCHAR2,--输入参数 Retval OUT ...

  9. TCP/IP__TCP协议常用协议默认端口号

  10. git回退版本，再返回最新分支git pull失败的解决经验

    ​ 点击"蓝字"关注我吧 作者:良知犹存 转载授权以及围观:欢迎添加微信公众号:Conscience_Remains 总述     一篇解决gti分支切换问题的文章,大家应该都有过 ...