HTML 커스텀 속성

data-* 으로 커스텀 속성 설정가능 

하나의 태그에 커스텀 속성의 갯수 제한 X

무조건 소문자로 인식 (대문자도 소문자로 인식)

 

<button type=”button” class=”btn btn-primary” data-name="update" data-id=”1“>수정하기</button>

 

 

● CSS 에서 사용

 - 속성 Selector의 경우

button[data-id='3'] {
  width: 400px;
}

 

● JavaScript 에서 사용

 - getAttribute() 사용

 let id = document.querySelector('button').getAttribute('data-id'); 	// "1"

 - dataset 객체로 커스텀속성 네이밍부분으로 접근하여 사용

 let button = document.querySelector('button'); 
 button.dataset.id // "1" 
 button.dataset.name // "update" 

 

 

● JQuery 에서 사용

 - data() 사용: 커스텀속성 네이밍부분으로 접근하여 사용

let button = $('button').data('id'); 	// "1"

 - attr() 사용

let button = $('button').attr('data-id'); 	// "1"