HTML5 dataset All In One
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
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的更多相关文章
- HTML5自定义属性对象Dataset简介
一.html5 自定义属性介绍 我之前翻译的“你必须知道的28个HTML5特征.窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设 ...
- Html5 dataset--自定义属性
dataset--自定义属性 HTMLElement.dataset data-*属性集 元素上保存数据 <div id="user" data-id="12345 ...
- HTML5 自定义属性 data-* 和 jQuery.data 详解
新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得dat ...
- HTML5 自定义属性 data-*介绍
在HTML5之前HTML4我们也可以自定义属性通过setAttribute去设置或者直接写在HTML标签里面那么HTML5新增data-*(*可以替换成你喜欢的任意名字)属性有什么用呢? 更便的捷操作 ...
- 使用 HTML5 & CSS 实现一个自定义开关按钮 switch button
使用 HTML5 & CSS 实现一个自定义开关按钮 switch button switch button <div class="switch"> < ...
- imagepool前端图片加载管理器(JavaScript图片连接池)
前言 imagepool是一款管理图片加载的JS工具,通过imagepool可以控制图片并发加载个数. 对于图片加载,最原始的方式就是直接写个img标签,比如:<img src="图片 ...
- Jsoup 使用教程:数据抽取
1.使用DOM方法来遍历一个文档 问题 你有一个HTML文档要从中提取数据,并了解这个HTML文档的结构. 方法 将HTML解析成一个Document之后,就可以使用类似于DOM的方法进行操作.示例代 ...
- jQuery源码解读 - 数据缓存系统:jQuery.data
jQuery在1.2后引入jQuery.data(数据缓存系统),主要的作用是让一组自定义的数据可以DOM元素相关联——浅显的说:就是让一个对象和一组数据一对一的关联. 一组和Element相关的数据 ...
- 使用 jsoup 解析HTML
// 参考资料: // http://www.jb51.net/article/43485.htm @Test public void AnalysisHTMLByString() { String ...
随机推荐
- 使用remix实现给合约账户转账
实现内容:从remix上的虚拟账户上转账给自己编写的智能合约账户 前提基础:对solidity有一些基础了解,对以太坊的账户机制有一定了解. 账户 在以太坊中账户的唯一标识是地址(address). ...
- GStreamer各个包构建
GStreamer按功能.维护的标准化程度.依赖库的版权差异等分了若干个包(package),如 gstreamer, gst-plugins-base, gst-plugins-good, gst- ...
- LDAP 简介
一.使用 Directory Services(目录服务)的目的 对于局域网内的一个用户来讲,工作等其它应用需要,我们必须凭帐号登录主机.用帐号收发E-mail,甚至为了管理需要公司还需要维护一个电子 ...
- 【汇编实践】go assembly
https://mp.weixin.qq.com/s/B577CdUkWCp_XgUc1VVvSQ asmshare/layout.md at master · cch123/asmshare htt ...
- (Oracle)看懂Oracle执行计划(转载)
最近一直在跟Oracle打交道,从最初的一脸懵逼到现在的略有所知,也来总结一下自己最近所学,不定时更新ing- 一:什么是Oracle执行计划? 执行计划是一条查询语句在Oracle中的执行过程或访问 ...
- QTREE----树剖
题目内容: ---------------------------------------------------- Query on a tree Time Limit: 851MS Memor ...
- loj10170
在 n×n 的棋盘上放 k 个国王,国王可攻击相邻的 8 个格子,求使它们无法互相攻击的方案总数. -------------------------------------------------- ...
- sql多行合并
例一 SELECT qqo.questionID '题目id', qqo.quesOption '选项' FROM qz_question_option qqo, qz_question qq WHE ...
- Language Guide (proto3) | proto3 语言指南(二)标量值类型
标量值类型 标量消息字段可以具有以下类型之一 -- 下表显示了.proto文件中指定的类型,以及自动生成的类中相应的类型: .proto Type 说明 C++ Type Java Type Pyth ...
- MySql(二)索引的设计与使用
MySql(二)索引的设计与使用 一.索引概述 二.设计索引的原则 三.BTREE索引与HASH索引 一.索引概述 所有Mysql列类型都可以被索引,对相关列使用索引时提高select操作性能的最佳途 ...