[html&jQuery] $.data()로 data-value 속성 사용하기

1.data-value 속성

	<button id="test1" value="test-1" data-btn-width="200">test1</button>

button 태그를 기준으로 위와 같이 data를 저장할 수 있다.

data-* 의 형태로 변수의 이름을 지정할 수 있다.

ex) data-val1, data-max-width, data-length

 

2.$.data()

제이쿼리의 data() 함수를 통해서 위의 값들을 가져올 수 있다.

	$("#test1").data('btn-width');   // 200
	$("#test1").data('btnWidth');    // 200

data()로 호출할 때는 "data-" 부분은 빼고 호출한다.

 

 

 

data()에 작성된 변수명을 보면 다르게 작성되어있지만, 같은 동작을 한다.

"-"로 연결된 부분은 camelCase 형태로도 호출할 수 있다.

 

3.$.attr()

attr()로 호출할 때는 "data-"부분을 반드시 포함시켜줘야 한다.

	$("#test1").attr('btnWidth');        // undefined
	$("#test1").attr('btn-width');       // undefined
	$("#test1").attr('data-btn-width');  // 200
    

 

4.html-dataset

html에서 직접 가져올 때는 dataset 속성을 사용해서 가져올 수 있다.

이때는 "camelCase를 사용해서만" 불러올 수 있다.

document.getElementById("test1").dataset.btnWidth; 
    // 200
	
    document.getElementById("test1").dataset.btn-width;
    // Uncaught ReferenceError: width is not defined
	
    document.getElementById("test1").dataset.data-btn-width;
    // Uncaught ReferenceError: btn is not defined
	
    document.getElementById("test1").dataset;
    // DOMStringMap {btnWidth: "200"}

위와 같이 btnWidth만 제대로 된 값을 불러올 수 있다.

 

*참고 사이트
https://api.jquery.com/data/
https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/데이터_속성_사용하기