Thuộc tính data- * trong HTML được sử dụng để nhúng các thuộc tính dữ liệu tùy chỉnh trên tất cả các phần tử HTML. Đây là thuộc tính toàn cục và có thể được sử dụng trên bất kỳ phần tử nào.
Sau đây là cú pháp -
<element data-attribute-name=”attribute_value”
Ở trên, tên thuộc tính chỉ được có ký tự viết thường. Cùng với đó, nó phải dài ít nhất một ký tự sau tiền tố "data-"
Bây giờ chúng ta hãy xem một ví dụ để triển khai các thuộc tính data- * trong HTML. Nhấp vào bất kỳ thuộc tính nào để biết thêm thông tin về nó -
Ví dụ
<!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> Đầu ra
Bây giờ hãy nhấp vào bất kỳ tiêu đề
nào ở trên để biết thêm thông tin về thuộc tính. Chúng tôi đã nhấp vào thuộc tính jQuery tại đây -
