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

https://caniuse.com/dataset

refs

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

---

---

©xgqfrms 2012-2020

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

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---