[HTML] 데이터 속성 사용하기 (data-*)

 

 

데이터 속성

• 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인됨.
• 어느 element에서든 data-로 시작하는 속성은 무엇이든 사용할 수 있음.
• data- 뒤에 붙는 이름은 대문자를 포함할 수 없다.

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

 

 

 

문법

<태그명 data-*="값"></태그명>

 

 

 

 

Javascript에서 접근하기

• getAttribute()

element.getAttribute(attributeName);

 

• dataset

element.dataset.attributeName
element.dataset[attributeName]

 

특정 속성 값을 추출하거나, 데이터 속성 값을 설정할 수 있다.

element.dataset.key = value

 

예를 들어,

const key = document.querySelector('.key')
key.dataset.hello = 1