[html ] data- 속성 (ft. dataset, data-key, data property)

data 속성 html

 

html에 태그 안에 의미있는 속성을 추가하여
자바스크립트로 접근가능한 재미있는 기능, data 속성을 소개합니다. 

 

data- 속성

• 의미론적 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.
• 사용법은 태그 안에 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 
• 자바스크립트와 css로 특정 html 요소에 접근이 가능합니다.

<button class="btn" data-key="color" data-value="blue">blue</button>
<button class="btn" data-key="color" data-value="pink">pink</button>

 

자바스크립트에서 data 속성 접근

• dataset을 통해 접근합니다.
• 이벤트 위임을 통해 부모에 이벤트를 등록하여, 여러 하위 요소 중 event.target으로 action을 일으킨 특정 요소에만 접근할 수 있습니다.
• 인터넷 익스플로어10 이하는 dataset을 지원하지 않아 getAttribute()를 대신 사용합니다.

let btn = document.querySelectorAll('.btn');
btn.forEach(el => el.addEventListener('click', e => console.log(e.target.dataset.value)))
//결과: blue 또는 pink

document.querySelectorAll("[data-value]").forEach(el => el.onclick = xxx)

 

css에서 data 속성 접근

btn[data-value='blue'] {
  width: 400px;
}
btn[data-value='pink'] {
  width: 600px;
}