TIL 32일차_데이터속성

HTML_데이터속성 ( data-)

data-속성은 요소의 확장 가능성을 염두에 두고 디자인되었다.

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

js에서 접근하기

javaScript에서 data속성을 읽기 위해서 dataset 속성을 사용한다.

var article = document.getElementById('electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

CSS에서 접근하기

css의 속성선택자를 사용하여 데이터에 따라 스타일을 바꿀 수 있다.

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

주의

보여야 하고 접근 가능해야 하는 내용은 데이터 속성에 저장하지 말자.

인터넷 익스플로러 10이하에서는 dataset을 지원하지 않는다.

커스텀요소와 관련된 (개발자의 의도와 관련된) 메타데이터를 지정할 때 사용한다.