[HTML] dataset data속성 사용하기

 

 

 

 

자바스크립트에서 변수를 사용하듯,  html의 변수 역할 을 할 수 있다.

 

 

 

HTML 문법

 

어느 element나 "data-"로 시작하는 속성을 지정해서 사용할 수 있다.

<article
  id="blog"
  data-name="mine-it-record"
  data-columns="3"
  data-index-number="1234"
  data-new-title="dataSet"
></article>

 

 

 

 

Javascript 에서의 접근법

 

dom을 선택하고 dataset속성을 통해 읽을 수 있다.

해당 element의 data-로 시작되는 속성들은 DOMStringMap이라는 인터페이스로 관리하며 dataset이라는 속성으로 접근이 가능하다.

(쉽게 말하면 객체 형식이라고 생각하면 될 것 같다.)

여기서 주의할 점은 속성에서 대시(-)로 표현된 것들은 camelCase로 변환되는 것에 주의하기만 하면 된다.

let blog = document.getElementById('blog');

blog.dataset
// {name: 'mine-it-record', columns: '3', indexNumber: '12314', newTitle: 'dataSet'}
blog.dataset.indexNumber // '1234'
blog.dataset[columns] // '3'
blog.dataset.newTitle // 'dataSet'

 

 

 

 

CSS 에서의 접근법

 

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

 

 

사용에 주의할 점: IE 10 이하 버전은 dataset을 지원하지 않음 !!