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. 03. struts2中Action配置的各项默认值

    Action中的各项默认值 Action各项配置 <action name="helloworld" class="com.liuyong666.action.He ...

  2. XV6学习（1） Lab util

    正在学习MIT的6.S081,把做的实验写一写吧. 实验的代码放在了Github上. 第一个实验是Lab util,算是一个热身的实验,没有涉及到系统的底层,就是使用系统调用来完成几个用户模式的小程序 ...

  3. 大型 web 前端架构设计-面向抽象编程入门

    https://mp.weixin.qq.com/s/GG6AtBz6KgNwplpaNXfggQ 大型 web 前端架构设计-面向抽象编程入门 曾探 腾讯技术工程 2021-01-04   依赖反转 ...

  4. 入 Go 必读：大型Go工程的项目结构及实战思考 原创 毛剑 QCon 今天

    入 Go 必读:大型Go工程的项目结构及实战思考 原创 毛剑 QCon 今天

  5. Java反序列化： 基于CommonsCollections4的Gadget分析 Java 序列化与反序列化安全分析

    Java反序列化: 基于CommonsCollections4的Gadget分析 welkin 京东安全 5天前 https://mp.weixin.qq.com/s/OqIWUsJe9XV39SPN ...

  6. css知识补充

    盒子模型的介绍: 在网页中基本上都会显示一些方方正正的盒子,这种盒子就被我们称为盒模型 盒子模型的五个属性: width,height,border(边框),padding(内边距),margin(外 ...

  7. 同时执行多个$.getJSON() 出现数据混乱的问题的解决

    $.getJSON() $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数,表示json数据的地址: d ...

  8. PowerBI系列组件关系详解

    随着数据分析工具的不断更新,我们所熟知的Excel可能已经不是你想象中的样子了. Excel和Power BI又有何千丝万缕的联系? M语言和DAX语言又是什么样的存在? 操作他们又需要掌握什么样的技 ...

  9. Linux常用命令详解（第二章）（cat、more、less、head、tail、clear、poweroff、reboot、alias、unalias、uname、hostname、history、whitch、wc、w、who、whoami、）

    本章命令(共18个): 1 2 3 4 5 6 7 8 9 10 cat more less head tail clear poweroff reboot alias unalias uname h ...

  10. CCF CSP 202012-1 期末预测之安全指数

    202012-1 期末预测之安全指数 题目背景 期末要到了,小菜同学找到了自己的好朋友顿顿,希望可以预测一下自己这学期是否会挂科. 题目描述 首先,顿顿选取了如"课堂表现".&qu ...