แอตทริบิวต์ data-* ใน HTML ใช้เพื่อฝังแอตทริบิวต์ข้อมูลที่กำหนดเองในองค์ประกอบ HTML ทั้งหมด นี่เป็นแอตทริบิวต์สากลและใช้กับองค์ประกอบใดก็ได้
ต่อไปนี้เป็นไวยากรณ์ -
<element data-attribute-name=”attribute_value”
ด้านบน ชื่อแอตทริบิวต์ควรมีเฉพาะตัวพิมพ์เล็กเท่านั้น ด้วยเหตุนี้ จะต้องยาวอย่างน้อยหนึ่งอักขระหลังคำนำหน้า "data-"
ให้เราดูตัวอย่างการใช้แอตทริบิวต์ data-* ใน HTML คลิกที่แอตทริบิวต์ใด ๆ เพื่อดูข้อมูลเพิ่มเติม -
ตัวอย่าง
<!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 ที่นี่ -
