data- 속성 사용하기

정의와 사용법

---

html 태그에 사용자가 원하는 속성값을 주는 방법이라 할수 있습니다.

data- 속성은 웹 문서의 레이아웃이나 내용에는 영향을 주지 않으면서 특정한 속성을 지정하고 싶을 때 사용자가 원하는 이름으로 만들수 있는 속성입니다. 어느 엘리멘트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있어요. 

예)  <section id="sky" data-type="background" data-speed="0.5">

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

---

JavaScript에서 사용법

값을 읽기 위한 완전한 HTML 이름과 함께 getAttribute() 를 사용하면 됩니다. 그러나 표준은 더 간단한 방법을 정의합니다.:  DOMStringMap 는 dataset 속성을 통해 읽어낼 수 있습니다.

dataset 객체를 통해 data 속성을 가져오기 위해서는 속성 이름의 data- 뒷 부분을 사용합니다.(대시들은 camelCase로 변환되는 것에 주의하세요.) 

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

article.dataset.columns // "3";

article.dataset.indexNumber //  "12314"

article.dataset.parent // "cars"

각 속성은 문자열이며 읽거나 쓸 수 있습니다. 위의 경우에서 article.dataset.columns = 5와 같이 설정하면 해당 속성을 "5"로 변경할 것입니다.

---

CSS에서 접근법

 부모 데이터를 article에서 보여주려면 attr 함수의 생성된 content 를 사용하면 됩니다.

article::before { content: attr(data-parent); }

CSS의 속성 선택자도 데이터에 따라 스타일을 바꾸는데 사용할 수 있습니다.:

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

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

---

문제점

검색 크롤러가 값을 찾지 못함. 때문에 접근해야하고 보여져야 하는 값들은 이 속성을 이용해서 저장하면 안됩니다.

인터넷 익스플로어 11 이전버전에서 dataset을 지원하지 않습니다. 10이하에서는 getAttribute()를 이용하십시요.