HTML data-\*

 

 

HTML data-\*

: custom attribute를 만들 때 사용
- 표준이 아닌 속성이나 추가적인 DOM 속성

- 특정한 데이터를 DOM 요소에 저장해두기 위함

1) javascript에서 접근하기
: dataset 객체를 통해 data 속성을 가져오기 위해서는 속성 이름의 data- 뒷부분을 사용
- 대시들은 camelCase로 변환되는 것에 주의

 

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

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

2) javascript로 할당하기 

 

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

article.dataset.columns = 3
article.dataset.indexNumber = "12314"

 

 

주의점

- 중요한 내용은 저장하면 안된다!!

 

 

 

출처

https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

데이터 속성 사용하기 - Web 개발 학습하기 | MDN

 

https://velog.io/@yunsungyang-omc/HTML-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-data-attribute#%EC%A3%BC%EC%9D%98%EC%A0%90

(HTML) 데이터 속성 사용하기 (data attribute)