dataset 속성
HTML 언어에서는 태그에 사용자 정의 속성을 추가할 수 있으며,
이때 속성 이름은 data-로 시작해야 하고,
그 뒤에 아무 속성 이름이 올 수 있습니다.
JavaScript를 통해 이러한 속성에 접근하려면
특별한 속성 dataset이 사용됩니다.
구문
요소.dataset.이름;
예제
속성 값을 읽어봅시다:
<div data-cost="1000"></div>
let elem = document.querySelector('div');
let res = elem.dataset.cost;
console.log(res);
코드 실행 결과:
'1000'
예제
속성 값을 변경해봅시다:
<div data-cost="1000"></div>
let elem = document.querySelector('div');
elem.dataset.cost = '2000';
결과적으로 코드는 다음과 같이 됩니다:
<div data-cost="2000"></div>
함께 보기
-
속성을 가져오는 메서드
getAttribute,
-
속성을 설정하는 메서드
setAttribute,
