데이터 속성 사용(data-*)

HTML5에서는 해당 요소에서 사용자가 임의로 지정한 속성값을 활용할 수 있으며, 이를 Custom Data Attribute라고 부른다.

data-* 속성은 두 부분으로 구성된다.

1. 속성 이름은 대문자를 포함해서는 안되며 "data-"접두어 다음에 적어도 하나 이상의 문자가 있어야 한다.

2. 속성 값은 임의의 문자열이 될 수 있다.

ex) data-id / data-name / data-age / data-job...

주의점

웹을 이용하는 사용자가 아무런 제한없이 data-속성을 보고 그 정보들을 해석할 수 있기 때문에 보안관련된 정보들은 담지 않는것이 좋다.

HTML

data- 뒤에 속성의 이름을 입력

<div id="a" data-name="dataName" data-value="dataValue">text</div>

Jquery

data()함수를 이용하여 data속성의 값을 출력하거나, data속성의 값을 지정할 수 있다.

$(selector).data(name); //출력
$(selector).data(name, value); //입력

//셀렉트
$("[data-name=dataName]");
//값출력
$("[data-name=dataName]").data("value");
//값셋팅
$("[data-name=dataName]").data("value","dataValue2");

해당 data속성을 지우기 위해서는 removeData를 이용하여 제거할 수 있다.

$("[data-name=dataName]").removeData("value");

css

css에서는 HTML의 데이터 속성 이름 그대로를 사용해 접근

#a[data-name="dataName"] {
    display: none;
}

※참고 url : http://syasidev.com/?p=607