dataset 속성

HTML 언어에서는 태그에 사용자 정의 속성을 추가할 수 있으며, 이때 속성 이름은 data-로 시작해야 하고, 그 뒤에 아무 속성 이름이 올 수 있습니다. JavaScript를 통해 이러한 속성에 접근하려면 특별한 속성 dataset이 사용됩니다.

구문

javascript요소.dataset.이름;

예제

속성 값을 읽어봅시다:

html<div data-cost="1000"></div>

javascriptlet elem = document.querySelector('div');
let res = elem.dataset.cost;

console.log(res);

코드 실행 결과:

javascript'1000'

예제

속성 값을 변경해봅시다:

html<div data-cost="1000"></div>

javascriptlet elem = document.querySelector('div');
elem.dataset.cost = '2000';

결과적으로 코드는 다음과 같이 됩니다:

html<div data-cost="2000"></div>

함께 보기