HTML] data 속성 간단 사용법

HTML

태그속 data-* 형식으로 저장하고 싶은 값들을 저장할 수 있습니다.

 

Example

<button type="button" id='btn' data-code-id='1234' data-type='B'>버튼</button>

JavaScript

JavaScript에서는 dataset을 통하여 값을 가져올수 있습니다.

속성에 접근하는 방법은 data 속성의 data-부분을 뺀 뒷부분만 사용하며 - 뒤 첫번째 영단어는 대문자로 작성하여야 합니다.

(데이터 속성 이름에서data-를 뺀 뒤 camelCase로 변환.)

ex) data-color-type  > dataset.colorType

 

Example

var codeId = document.getElementById('btn').dataset.codeId;
var type = document.getElementById('btn').dataset.type;

JQuery

JQuery에서는 data()를 통하여 값을 가져올수 있습니다.

JQuery에서도 JavaScript와 같이 - 뒤 첫번째 영단어는 대문자로 작성하여야 합니다.

(데이터 속성 이름에서data-를 뺀 뒤 camelCase로 변환.)

 

Example

var codeId = $("#btn").data("codeId");
var type = $("#btn").data("type");

CSS

CSS에서는 일반 속성 가져오는 방법과 같습니다.

 

Example

#btn[data-code-id="1234"] {
	//css 내용
}