<body> <h1>Species</h1> <p>Click on a species to see what type it is:</p> <ul> <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li> <!-- 클릭 시 The Owl is a bird.라고 alert창에 표시 --> <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li> <!-- 클릭 시 The Salmon is a fish.라고 alert창에 표시 --> <li onclick="showDetails(this)" id="tatantula" data-animal-type="spider">Tarantula</li> <!-- 클릭 시 The Tarantula is a spider.라고 alert창에 표시 --> </ul> <script> function showDetails(animal) { var animalType = animal.getAttribute('data-animal-type'); alert('The ' + animal.innerHTML + ' is a ' + animalType + '.'); } </script> </body>
data-* 속성은 페이지 또는 애플리케이션에 개인 사용자 정의 데이터(custom data private)를 저장하는 데 사용됩니다.
data-* 속성은 모든 HTML 요소에 사용자 정의 데이터 속성을 끼워 넣을 수 있는 기능을 제공합니다.
그런 다음 저장된 (사용자 정의) 데이터를 해당 페이지의 JavaScript에서 사용하여 보다 매력적인 사용자 경험을 만들 수 있습니다
(Ajax 호출 또는 서버 측 데이터베이스 쿼리없이).
data-* 속성은 두 부분으로 구성됩니다:
1. 속성 이름은 대문자를 포함할 수 없으며 접두사 %%"data-"%% 뒤에 최소한 한 문자 이상을 표기해야 합니다. 2. 속성 값은 임의의 문자열이 될 수 있습니다.
Note: 접두사 "data-"가 붙은 사용자 정의 속성은 사용자 에이전트에게 완전히 무시됩니다.
<element data-*-"somevalue">
| Value | Description |
|---|---|
| somevalue | 속성 값을 (문자열로) 지정합니다. |