html
[HTML] 전용데이터 속성 data-*
알찬 퍼블리셔
2019. 6. 13. 18:21
728x90
반응형
data-* 속성을 통해 html과 dom 사이에 정보교환이 가능하다
css 가상선택자 :after 과 :before에서 content : attr();을 사용해 data-*의 값을 가져와 사용할 수 있다.
[CSS/CSS 기초] - [CSS]attr()이용해서 속성가져오기
자바스크립트를 통해 해당값을 가져와 사용할 수 있다.
<article id="electric-cars" data-columns="3" data-index-number="12314" data-parent="cars"> ... </article>
const article = document.querySelector('#electric-cars');
article.dataset.columns;
dataset을 이용해 가져올 수 있습니다.
엘리먼트.dataset 속성은 DOMStringMap으로
전용 데이터 속성 이름이 data-test-value일 경우 HTMLElement.dataset.testValue 또는 HTMLElement.dataset["testValue"]으로 값을 가져올 수 있다.
728x90
반응형