[HTML] data 속성 (data-*)

HTML에서 지원하는 data 속성은 HTML 요소에 추가 정보를 지정하는 속성이다.

 

사용 방법도 간단하고 유용하기 때문에 아주 좋은 아이다 ㅎㅎ

 

HTML 문법

모든 엘리먼트에 data- 형식으로 사용할 수 있음

<div data-id="eunbin" data-pw="1234"></div>

 

JavaScript에서 접근하기

1. getAttribute()로 접근

console.log(div.getAttribute('data-id'));

2. dataset으로 접근

const div = document.querySelector('div');
const id = div.dataset.id;
const pw = div.dataset.pw;
console.log(id, pw);

각 속성은 문자열이고 읽거나 쓸 수 있습니다. div.dataset.id = 'eunbinLove'로 설정해서 값을 변경할 수 있습니다.

※ data-index-number처럼 2개 이상의 단어로 설정한 경우에는 camelCase 형식으로 변환됩니다. -> indexNumber

CSS 접근하기

데이터 속성은 HTML 속성이기 때문에 CSS 에서도 접근할 수 있습니다.

div[data-id='eunbin'] {
	width: 100px;
	height: 100px;
	background-color: red;
}

 

출처:

https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/%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

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