HTML5 data-\* attribute
HTML5 data-* attribute
1
2
<li id="test" data-animal-type="bird">Owl</li>
Global attribute다. 페이지 혹은 앱 내에서만 사용할 데이터에 지정한다.
이렇게 지정한 데이터 "bird"
는 JS에서 불러와 사용할 수 있다.CSS에서도 불러와 사용할 수 있다는게 큰 특징!!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// getAttribute()를 사용하기
var test = document.getElementById('test');
console.log(test.getAttribute("data-animal-type"));
// .으로 접근하기 (IE 11 이상, 표준)
var test = document.getElementById('test');
console.log(test.dataset.animalType); // 자동으로 camelCase로 변경됨
// jQuery
console.log($("#test").data("animal-type"));
console.log($("#test").data("animalType"));
아무 문자열에 data- prefix를 붙이는 방식으로 사용할 수 있기 때문에, 이를 이용하면 태그가 지원하지 않는 임의의 이름의 속성을 정의할 수 있다. 태그의 성격을 더 명확히 나타내거나, 분류하는 것이 가능해진다. (원래는 태그가 지원하는 속성만 지정할 수 있기 때문에, 그냥 animal-type 같은 속성을 지정하는 것은 불가능하다.)
단, 기본으로 지원하는 속성으로 태그를 표현, 분류할 수 없을 경우에만 사용하도록 한다. 불필요하게 사용하면 지저분해지기 때문.
서버로 전송할 때는 자동으로 data- 문자열이 빠진다. 위 태그를 예로 들면 data-가 빠져 animal-type = “bird” 가 전송된다.
This post is licensed under CC BY 4.0 by the author.