HTML Reference Manual

HTML Tag Directory

HTML data-* attributes

The data-* global attributes are a class of attributes called custom data attributes, which give us the ability to embed custom data attributes on all HTML elements and allow for the exchange of proprietary data between HTML and scripts (usually JavaScript).

خصائص العلامات العالمية لـ HTML

Online Example

Use data-* attributes to embed custom data:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Basic Tutorial (oldtoolbag.com)</title>　
<script>
function showDetails(animal)
{
　　　　var animalType = animal.getAttribute("data-animal-type");
　　　　alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<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>
　　<li　onclick="showDetails(this)"　id="salmon"　data-animal-type="fish">Salmon</li>　　
　　<li　onclick="showDetails(this)"　id="tarantula"　data-animal-type="spider">Tarantula</li>　　
</ul>
</body>
</html>

اختبار لمعرفة ‹/›

توافق المتصفحات

IEFirefoxOperaChromeSafari

يدعم جميع المتصفحات الشائعة خاصية data-*.

التعريف والاستخدام

تستخدم خاصية data-* لتخزين البيانات المخصصة التي سيتم استخدامها في التطبيق بعد الصفحة.

يمكن تضمين خاصية data-* في جميع عناصر HTML.

تسمح البيانات المخصصة للصفحة بتحسين تجربة التفاعل (بدون الحاجة إلى استخدام Ajax أو استعلامات الخادم).

تتكون خاصية data-* من جزأين:

لا يجب أن تحتوي اسم الخاصية على أحرف كبيرة، ويجب أن يكون هناك على الأقل حرف واحد بعد data-.
يمكن أن تكون الخاصية أي شريط نصي

ملاحظة: يُتجاهل مسبقًا مقدمو العملاء للوحة التكوين "data-" المخصصة.

الفرق بين HTML 4.01 و HTML5

خصائص data-* هي إضافة جديدة في HTML5.

النحو

<عنصر data-*="somevalue">

قيمة الخاصية

القيمة	الوصف
somevalue	تحديد قيمة الخاصية (شريط نصي)

خصائص العلامات العالمية لـ HTML

HTML: <template> العنوان