data-

HTML 문법

: 간단하다. 어느 엘리먼트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다.

화면에 안 보이게 글이나 추가 정보를 엘리먼트에 담아 놓을 수 있어요.

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

JavaScript에서 접근하기

: dataset 속성을 통해 읽어낼 수 있습니다.

dataset 객체를 통해 data 속성을 가져오기 위해서는 속성 이름의 data- 뒷 부분을 사용합니다.

(대시들은 camelCase로 변환되는 것에 주의하세요.)

var article = document.getElementById('electriccars');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

CSS에서 접근하기

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}