بيانات HTML- * السمات
مثال
استخدم السمة 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-*تمنحنا السمات القدرة على تضمين سمات البيانات المخصصة في جميع عناصر HTML .
يمكن بعد ذلك استخدام البيانات المخزنة (المخصصة) في JavaScript للصفحة لإنشاء تجربة مستخدم أكثر جاذبية (بدون أي مكالمات Ajax أو استعلامات قاعدة بيانات من جانب الخادم).
تتكون data-*السمات من جزأين:
- يجب ألا يحتوي اسم السمة على أي أحرف كبيرة ، ويجب أن يتكون من حرف واحد على الأقل بعد البادئة "data-"
- يمكن أن تكون قيمة السمة أي سلسلة
ملاحظة: سيتجاهل وكيل المستخدم السمات المخصصة مسبوقة بـ "data-" تمامًا.
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم السمة بشكل كامل.
| Attribute | |||||
|---|---|---|---|---|---|
| data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |
بناء الجملة
<element data-*="somevalue">
قيم السمات
| Value | Description |
|---|---|
| somevalue | Specifies the value of the attribute (as a string) |
الصفحات ذات الصلة
دروس HTML: سمات HTML
مرجع HTML DOM: أسلوب getAttribute () HTML DOM