خصائص data-* HTML

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

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

data-* تمنحنا الخاصية القدرة على تضمين خصائص data مخصصة في جميع عناصر HTML.

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

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

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

الناشر سيقوم بتجاهل جميع الخصائص المسبوقة بـ "data-".

انظر أيضًا:

دليل HTMLخصائص HTML

دليل DOM HTMLمетод getAttribute() DOM HTML

مثال

استخدام خصائص data-* لدمج بيانات مخصصة:

<ul>
  <li data-animal-type="鸟类">喜鹊</li>
  <li data-animal-type="鱼类">金枪鱼</li>
  <li data-animal-type="蜘蛛">蝇虎</li>
</ul>

جرب بنفسك

النحو

<element data-*="somevalue">

قيمة الخاصية

القيمة الوصف
somevalue تحديد قيمة الخاصية (بصيغة نصية).

دعم المتصفحات

الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم هذه الخاصية بشكل كامل.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 5.5 2.0 3.1 9.6