خاصیت data-* در HTML

  /  فرانت اند   /  HTML   /  خاصیت data در HTML

خاصیت data در HTML یکسری داده های سفارشی روی عناصر ایجاد می کند که میتوانیم بدون دسترسی به پایگاه داده از طریق جاوااسکریپت به آنها دسترسی داشته باشیم.

صفت data-* شامل ۲ قسمت می باشد:

  • نام صفت نباید حاوی حروف بزرگ انگلیسی باشد و باید حداقل یک حرف بعد از پیشوند data- وجود داشته باشد.
  • مقدار این صفت میتواند از نوع رشته باشد.

مثال

در مثال زیر نام گونه های مختلف حیوانی را آورده ایم و با صفت data-* نوع گونه را مشخص کرده ایم ، مثلاً جغد یک پرنده هست !

<ul>
<li data-animal-type="bird">جغد</li>
<li data-animal-type="fish">سالمون</li>
<li data-animal-type="spider">رتیل</li>
</ul>


پشتیبانی مرورگر ها

اعداد موجود در جدول اولین نسخه مرورگر که این ویژگی را کاملاً پشتیبانی می کند نشان می دهد.

خاصیت
data-*4.05.52.03.19.6

نحوه استفاده

<element data-*="somevalue">

مقادیر خاصیت

مقدارتوضیحات
somevalueمقدار صفت را مشخص می کند (به عنوان یک رشته)

مثال های بیشتر

<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(name) {
var nameType = name.getAttribute("data-name");
document.getElementById("result").innerHTML = "اسم " + name.innerHTML + nameType + " هست ";
}
</script>
</head>
<body dir="rtl">

<p>روی اسامی زیر کلیک کنید: </p>

<ul>
<li onclick="showDetails(this)" id="m" data-name=" پسرانه">Matin</li>
<li onclick="showDetails(this)" id="z" data-name=" دخترانه">Zahra</li>
</ul>

<p id="result"></p>

</body>
</html>

5/5 - (1 امتیاز)

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر