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. 使用remix实现给合约账户转账

    实现内容:从remix上的虚拟账户上转账给自己编写的智能合约账户 前提基础:对solidity有一些基础了解,对以太坊的账户机制有一定了解. 账户 在以太坊中账户的唯一标识是地址(address). ...

  2. GStreamer各个包构建

    GStreamer按功能.维护的标准化程度.依赖库的版权差异等分了若干个包(package),如 gstreamer, gst-plugins-base, gst-plugins-good, gst- ...

  3. LDAP 简介

    一.使用 Directory Services(目录服务)的目的 对于局域网内的一个用户来讲,工作等其它应用需要,我们必须凭帐号登录主机.用帐号收发E-mail,甚至为了管理需要公司还需要维护一个电子 ...

  4. 【汇编实践】go assembly

    https://mp.weixin.qq.com/s/B577CdUkWCp_XgUc1VVvSQ asmshare/layout.md at master · cch123/asmshare htt ...

  5. (Oracle)看懂Oracle执行计划(转载)

    最近一直在跟Oracle打交道,从最初的一脸懵逼到现在的略有所知,也来总结一下自己最近所学,不定时更新ing- 一:什么是Oracle执行计划? 执行计划是一条查询语句在Oracle中的执行过程或访问 ...

  6. QTREE----树剖

    题目内容: ---------------------------------------------------- Query on a tree Time Limit: 851MS   Memor ...

  7. loj10170

    在 n×n 的棋盘上放 k 个国王,国王可攻击相邻的 8 个格子,求使它们无法互相攻击的方案总数. -------------------------------------------------- ...

  8. sql多行合并

    例一 SELECT qqo.questionID '题目id', qqo.quesOption '选项' FROM qz_question_option qqo, qz_question qq WHE ...

  9. Language Guide (proto3) | proto3 语言指南(二)标量值类型

    标量值类型 标量消息字段可以具有以下类型之一 -- 下表显示了.proto文件中指定的类型,以及自动生成的类中相应的类型: .proto Type 说明 C++ Type Java Type Pyth ...

  10. MySql(二)索引的设计与使用

    MySql(二)索引的设计与使用 一.索引概述 二.设计索引的原则 三.BTREE索引与HASH索引 一.索引概述 所有Mysql列类型都可以被索引,对相关列使用索引时提高select操作性能的最佳途 ...