مثال
استخدام data-* نسبتها الى تضمين بيانات مخصصة:
<ul>
<li data-animal-type="bird">Owl</li>
<li
data-animal-type="fish">Salmon</li>
<li
data-animal-type="spider">Tarantula</li>
</ul>
انها محاولة لنفسك » تعريف واستخدام
و data-* يستخدم سمات لتخزين البيانات المخصص الخاص إلى صفحة أو التطبيق.
و data-* سمات يعطينا القدرة على تضمين مخصص data سمات على جميع عناصر HTML.
ويمكن بعد ذلك البيانات (حسب الطلب) المخزنة يمكن استخدامها في جافا سكريبت على صفحة لخلق تجربة المستخدم أكثر جاذبية (بدون أي اياكس يدعو أو استعلامات قاعدة البيانات من جانب الخادم).
و data-* تتكون سمات من جزأين:
- يجب أن لا يحتوي اسم السمة أي الأحرف الكبيرة، ويجب أن يكون حرف واحد على الأقل لفترة طويلة بعد البادئة "data-"
- يمكن أن تكون قيمة السمة أي سلسلة
ملاحظة: السمات المخصصة مسبوقة ب "data-" سيتم تجاهلها تماما من قبل وكيل المستخدم.
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل السمة.
| السمة | |||||
|---|---|---|---|---|---|
| data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |
الخلافات بين HTML 4.01 و HTML5
و data-* الصفات هي جديدة في HTML5.
بناء الجملة
<elementdata-*=" somevalue ">
السمة القيم
| القيمة | وصف |
|---|---|
| somevalue | تحدد قيمة السمة (كسلسلة) |
صفحات ذات صلة
درس HTML: سمات HTML
HTML DOM المرجعي: HTML DOM getAttribute() الطريقة