HTML의 data-* 속성은 모든 HTML 요소에 사용자 정의 데이터 속성을 포함하는 데 사용됩니다. 이것은 전역 속성이며 모든 요소에 사용할 수 있습니다.
다음은 구문입니다 -
<element data-attribute-name=”attribute_value”
위에서 속성 이름은 소문자만 사용해야 합니다. 그와 함께 접두사 "data-"
뒤에 적어도 한 문자 이상이어야 합니다.이제 HTML에서 data-* 속성을 구현하는 예를 살펴보겠습니다. 속성 중 하나를 클릭하면 속성에 대한 자세한 정보를 얻을 수 있습니다. −
예시
<!DOCTYPE html>
<html>
<head>
<script>
function display(tutorial) {
var type = tutorial.getAttribute("data-tutorial-type");
alert(tutorial.innerHTML + " = " + type + ".");
}
</script>
</head>
<body>
<h1>Tutorials</h1>
<h2 onclick="display(this)" id="java" data-tutorial-type="programming language">Java</h2>
<h2 onclick="display(this)" id="jquery" data-tutorial-type="scripting language">jQuery</h2>
<h2 onclick="display(this)" id="mysql" data-tutorial-type="database">MySQL</h2>
</body>
</html> 출력
이제 속성에 대한 자세한 정보를 보려면 위의
제목을 클릭하십시오. 여기에서 jQuery 속성을 클릭했습니다 -
