예
사용 data-* 사용자 정의 데이터를 포함하는 속성 :
<ul>
<li data-animal-type="bird">Owl</li>
<li
data-animal-type="fish">Salmon</li>
<li
data-animal-type="spider">Tarantula</li>
</ul>
»그것을 자신을 시도 정의 및 사용
data-* 속성은 페이지 또는 애플리케이션 전용 사용자 데이터를 저장하는데 사용된다.
data-* 속성은 우리에게 사용자 지정 삽입 할 수있는 기능 제공 data 모든 HTML 요소에 속성을.
저장된 (정의) 데이터는 (모든 Ajax 호출 또는 서버 측 데이터베이스 쿼리없이)보다 매력적인 사용자 경험을 창조하기 위해 페이지의 스크립트에 사용될 수있다.
data-* 속성은 두 부분으로 구성 :
- 속성 이름은 대문자를 포함 할 수 없습니다, 그리고 접두사 후 최소 한 문자 이상이어야합니다 "data-"
- 속성 값은 임의의 문자열이 될 수 있습니다
참고 : 접두사 사용자 정의 속성 "data-" 완전히 사용자 에이전트에 의해 무시됩니다.
브라우저 지원
표의 수치는 완전히 특성을 지원하는 제 브라우저 버전을 지정.
속성 | |||||
---|---|---|---|---|---|
data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |
HTML 4.01과 HTML5의 차이점
data-* 속성은 HTML5의 새로운 기능입니다.
통사론
<elementdata-*=" somevalue ">
속성 값
값 | 기술 |
---|---|
somevalue | (캐릭터 등) 속성의 값을 지정 |
관련 페이지
HTML 자습서 : HTML 속성
HTML DOM 참조 : HTML DOM getAttribute() 메소드