[HTML] 전용데이터 속성 data-*

data-*  속성을 통해 html과 dom 사이에 정보교환이 가능하다 

 

 

 

css 가상선택자 :after 과 :before에서 content : attr();을 사용해 data-*의 값을 가져와 사용할 수 있다.

[CSS/CSS 기초] - [CSS]attr()이용해서 속성가져오기

[CSS]attr()이용해서 속성가져오기

 

자바스크립트를 통해 해당값을 가져와 사용할 수 있다.

 

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

 

const article = document.querySelector('#electric-cars');



article.dataset.columns;

dataset을 이용해 가져올 수 있습니다. 

 

 

엘리먼트.dataset 속성은 DOMStringMap으로

전용 데이터 속성 이름이 data-test-value일 경우 HTMLElement.dataset.testValue 또는 HTMLElement.dataset["testValue"]으로 값을 가져올 수 있다.