CSS学习--dataset

dataset

允许我们在标准内于HTML元素中存储额外的信息

<article id="electriccars" data-columns="3" data-index-number="12314"
data-parent="cars"> ... </article>

/* 在article前面插入伪元素，内容为data-parent属性的值 */
/* attr(): 获取某个属性的值 */
article::before { content: attr(data-parent); }
/* 给data-parent属性值为cars的article标签添加css样式 */
article[data-parent="cars"] { width: 300px; }

var article = document.querySelector('#electriccars');
/* 可读 */
console.log(article.dataset.columns);
/* 可写 */
article.dataset.number = '12314'