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/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/13747905.html
未经授权禁止转载,违者必究!