使用 data- 属性的好处是什么？

来源

刚开始我是懵逼的。data-属性是啥？突然想起，日常开发中经常使用 data-id 来显示双向绑定的属性。那 data-*到底是啥？

定义

是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本(一般指 JavaScript) 与 HTML 之间进行专有数据的交换。

所有这些自定义数据属性都可以通过所属元素的 HTMLElement 接口来访问。 HTMLElement.dataset 属性可以访问它们 除此还有啥呢？ 在 css 中也能访问到。

article::before{

   content:attr( data-** )

}

可以通过 css 属性选择器改变 css 样式

article[ data-columns = '3' ]{

    width : 400px;

}

article[ data-colimns = '4' ]{

    width : 500px;

}