ویژگی data-* HTML

تعریف و استفاده

data-* ویژگی برای ذخیره داده‌های سفارشی خصوصی صفحه یا برنامه استفاده می‌شود.

data-* ویژگی به ما این امکان را می‌دهد که بتوانیم ویژگی‌های data سفارشی را در تمامی عناصر HTML جاسازی کنیم.

داده‌های ذخیره‌شده (سفارشی) می‌توانند توسط JavaScript صفحه‌ای استفاده شوند تا تجربه بهتری برای کاربر ایجاد شود (بدون فراخوانی Ajax یا جستجو در پایگاه داده سرور).

data-* ویژگی از دو بخش تشکیل شده است:

  • نام ویژگی نباید شامل حروف بزرگ باشد و باید حداقل یک کاراکتر پس از پیشوند "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