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. 关于BI测试

    BI测试: BI是从数据接入.数据准备.数据分析.数据可视化到数bai据分发应用的一系列过程,目的是为了辅助企业高效决策.而报表虽然最终也实现了数据可视化,但是对于数据分析的维度.深度.颗粒度.实时性 ...

  2. Profile Guided Optimization Link Time Optimization

    https://github.com/python/cpython Profile Guided Optimization PGO takes advantage of recent versions ...

  3. mdns

    mdns mdns_百度百科 https://baike.baidu.com/item/mdns 在计算机网络中 , 多播DNS ( mDNS )协议将主机名解析为不包含本地名称服务器的小型网络中的I ...

  4. BigDecimal add方法问题：调用add后，求和结果没变

    import java.math.BigDecimal; public class DecimalAdd { public static void main(String[] args) { BigD ...

  5. C++学习之STL（二）String

    1.assign assign方法可以理解为先将原字符串清空,然后赋予新的值作替换. 返回类型为 string类型的引用.其常用的重载也有下列几种: a. string& assign ( c ...

  6. （十七）整合 Zookeeper组件，管理架构中服务协调

    整合 Zookeeper组件,管理架构中服务协调 1.Zookeeper基础简介 1.1 基本理论 1.2 应用场景 2.安全管理操作 2.1 操作权限 2.2 认证方式: 2.3 Digest授权流 ...

  7. Java——对象和类

    对象:类的一个实例,有状态和行为. 类:一个模板,描述一类对象行为和状态. Java中的对象 对象具有状态和行为.对象的状态就是属性,行为通过方法体现. 在开发中,方法操作对象内部状态的改变,对象的相 ...

  8. Spring boot 自定义注解标签记录系统访问日志

    package io.renren.common.annotation; import java.lang.annotation.Documented; import java.lang.annota ...

  9. typedef void (*sighandler_t)(int);

    typedef void (*sighandler_t)(int); sighandler_t signal(int signum, sighandler_t handler); ---------- ...

  10. IP路由__动态路由

    1.使用协议来查找网络并更新路由表的配置,就是动态路由.它比使用静态或默认路由方便,但它需要一定的路由器CPU处理时间和网络链接带宽.路由协议定义了路由器与相邻路由器通信时所使用的一组规则. 在互联网 ...