...
خاصیت 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.0 | 5.5 | 2.0 | 3.1 | 9.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>آیا این مطلب برای شما مفید بود ؟
خیر
بله
يكى از راههاى پاك ماندن
و درود خدا بر او، فرمود: دست نيافتن به گناه نوعى عصمت است.
حکمت 345 نهج البلاغه
