เราสามารถจัดเก็บข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบได้โดยใช้ attribute data-* ตัวอย่างต่อไปนี้แสดงการใช้งาน data-* attribute ใน CSS
ตัวอย่างที่ 1: การใช้กับ JavaScript
<!DOCTYPE html>
<html>
<head>
<style>
dl {
margin: 2%;
}
p {
width: 60%;
background-color: lightgreen;
padding: 2%;
color: white;
text-align: center;
}
dt {
font-weight: bold;
}
dt:hover {
cursor: pointer;
}
dd {
font-style: italic;
}
</style>
</head>
<body>
<dl>
<dt onmouseover="showDescription(this)" data-food-type="beverages">Tea</dt>
<dd>Hot Spicy Tea or Ice Lemon Tea </dd>
<dt onmouseover="showDescription(this)" data-food-type="snacks">Toast</dt>
<dd>Hot Garlic Butter Toast</dd>
</dl>
<p>(hover over food item)</p>
</body>
<script>
function showDescription(food) {
let foodType = food.getAttribute("data-food-type");
document.querySelector('p').textContent = ("We have " + food.innerHTML + " in " + foodType + ".");
}
</script>
</html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
ตัวอย่างที่ 2: การใช้กับ CSS pseudo-elements
<!DOCTYPE html>
<html>
<head>
<style>
section {
margin: 8%;
box-shadow: inset 0 0 20px red;
width: 300px;
padding: 2%;
}
section[data-number='77'] {
height: 120px;
border-radius: 15px;
}
section::before {
content: attr(data-user);
font-size: 1.2em;
}
section::after {
content: attr(data-number);
}
</style>
</head>
<body>
<section data-number="77" data-user="Client">
<p>Demo Text</p>
</section>
</body>
</html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
