ATTRIBUTES

Editing
  • account_tree
  • bug_report

data-*

사용자 데이터를 지정하는 특별한 속성이다. DOM으로 데이터를 받아 자바스크립트 로직에 사용할 수 있다.

설명

모든 사용자 지정 속성의 명칭은 'data-' 시작하며 '-' 뒤에 원하는 이름을 지정한다. 이름을 지정할 때는 'xml'로 시작할 수 없으며 세미콜론을 포함해서는 안된다. 또한 대문자를 포함하지 않도록 한다.

이렇게 네이밍된 속성의 값은 HTMLElementdataset 속성을 통해 접근(getter, setter)이 가능하다. 웹브라우저는 data-으로 시작하는 속성을 객체로 해석하며 이 객체를 dataset 프로퍼티로 참조된다. 하이픈(-) 뒤의 이름이 dataset 프로퍼티에 의해 참조되는 객체의 프로퍼티로 사용된다. 참고로 사용자 속성 명에 하이픈(-)이 포함되면 dataset 프로퍼티로 참조되는 객체에서는 하이픈을 없애고 대신에 다음 첫 글자를 대문자로 사용할 수 있도록 처리한다.

구문

마크업 형식
<ol> <li data-price="10000">Blueberry</li> <li data-price="7000">Banana</li>
</ol>

버전 명세

HTML Standard
#attr-data-*

지원 웹브라우저