مقالة مقدمة من wulin.com (www.vevb.com): تطبيق السمات المخصصة في HTML5 ليس معقدًا تقنيًا. الصعوبة الحقيقية هي ما إذا كانت الطريقة التي تختار استخدامها مناسبة لمشروعك ؛ إن أمكن ، كيف تجعلها أكثر فاعلية؟ يرجى تذكر أنه من المبكر جدًا تمكين طريقة مجموعة البيانات كدالة للصفحة ، بعد كل شيء ، لا تدعم العديد من المتصفحات هذه الوظيفة.
تطوير HTML5 على قدم وساق ، واستخدام السمات المخصصة في HTML5 يكتسب شعبية تدريجيا بين المطورين ؛ بالإضافة إلى ذلك ، يلعب أيضًا دورًا مهمًا في دلالات تطوير الويب. في هذه المقالة ، سنستكشف إنشاء وصول خصائص البيانات المخصصة HTML5 ، بما في ذلك وظائف JavaScript ، من خلال أمثلة عملية.
قبل استخدام HTML5 ، أضف أولاً سمات مخصصة إلى عنصر HTML والوصول إليه من خلال JavaScript. إذا كنت قد جربتها من قبل ، فستجد أنه من السهل تجاهل التحقق من العلامة ، ويمكن أن يوفر لك HTML5 وظيفة إنشاء سمات العناصر الخاصة بك داخل صفحة ويب صالحة.
إنشاء ملفات HTML5:
إذا لم تكن قد اكتشفت أي واحد يجب استخدامه ، فيمكنك نسخ الكود التالي:
<! doctype html>
<html>
<head>
<script>
/*وظائف هنا*/
< /script>
</head>
<body>
< /body>
</html>
قم بتعيين عناصر مخصصة في الجسم والوصول إليها باستخدام عناصر JavaScript في جزء من منطقة البرنامج النصي في الرأس.
إنشاء عناصر:
أولاً ، أضف بعض المحتوى البسيط والسمات المخصصة بالإضافة إلى عناصر مثل IDS حتى نتمكن من التعرف على أمثلة JavaScript.
<div id = product1 data-prod-category = clothing>
قميص القطن
</div>
كما ترون ، تكون السمة المخصصة في شكل: Data-*، قم بتعيين الاسم في قسم البيانات أو الاسم الذي حددته. استخدام الخصائص المخصصة في HTML5 هو الطريقة الوحيدة للقيام بذلك. لذلك ، إذا كنت ترغب في التحقق من أن صفحة الويب صالحة ، فيمكنك استخدام هذه الطريقة.
بالطبع ، يحدد جزء تفاصيل المشروع ما إذا كانت خاصية مخصصة مفيدة لك وكيفية تسميتها. يمكن تطبيق هذا المثال على مواقع البيع بالتجزئة في فئات المنتجات المختلفة.
تتيح لك الخصائص المخصصة استخدام رمز JavaScript داخل الصفحة بطريقة خاصة لتعيين العناصر ، مثل إمكانيات عرض الرسوم المتحركة. إذا لم تكن هناك عناصر HTML قياسية ، فإننا نوصي باستخدام خصائص مخصصة.
أضف زر اختبار
يمكن تنفيذ الحدث باستخدام عناصر JavaScript الخاصة به على الصفحة ، شريطة إضافة الرمز التالي إلى الصفحة:
أقل
احصل على سمات:
الطريقة الأكثر شيوعًا للوصول إلى الخصائص في JavaScript هي استخدام GetAttributes ، وهي أيضًا الخطوة الأولى التي يتعين علينا القيام بها. أضف الوظيفة التالية في منطقة البرنامج النصي للصفحة:
وظيفة getElementAttribute (elemid) {
var theElement = document.getElementById (elemid) ؛
var theattribute = theElement.getAttribute ('data-product-category') ؛
تنبيه (theattribute) ؛
}
هنا ، أضفنا قيمة التنبيه إلى المثال ، وبالطبع يمكنك أيضًا إضافته في البرنامج النصي وفقًا لاحتياجاتك الخاصة.
احصل على البيانات:
يمكنك استخدام مجموعات بيانات العناصر بدلاً من GetAttributes DOM ، والتي قد تكون أكثر كفاءة ، خاصة في بعض الحالات التي يكرر فيها الرمز من خلال سمات متعددة ، ومع ذلك ، فإن دعم المتصفح لمجموعة البيانات لا يزال منخفضًا للغاية ، لذا فإن وضع هذا في الاعتبار يمكن أن ينفذ هذا الرمز نفس عملية / / طريقة // وراءها.
// var theattribute = thelement.getAtTriment ('Data-Product-Category') ؛ var theattribute = thelement.dataset.productCategory ؛
إزالة البيانات- في مجموعة البيانات بدءًا من اسم السمة ، لا يزال مدرجًا في HTML.
لاحظ أنه إذا كان لديك واصلة في اسم الخاصية المخصصة الخاصة بك ، فإن هذا سيأخذ حالة الجمال النموذج عند الوصول إليها من خلال البيانات ، أي (تصبح فئة منتجات البيانات ProductCategory).
وحدات ووظائف أخرى
لقد حصلنا على هذه الخاصية ولا يزال من الممكن ضبط البرنامج النصي وحذفه. يوضح الرمز التالي كيفية تعيين الخصائص باستخدام وحدات JavaScript القياسية ومجموعات البيانات.
يمكنك أيضًا استخدام طريقة DOM أو مجموعة البيانات لحذف سمة معينة:
// طريقة دوم
theElement.RemoVeatTribute ('Data-Product-Category') ؛
// إصدار مجموعة البيانات
theelement.dataset.productCategory = null ؛
خاتمة:
تطبيق الخصائص المخصصة في HTML5 ليس معقدًا تقنيًا. الصعوبة الحقيقية هي ما إذا كانت الطريقة التي تختار استخدامها مناسبة لمشروعك ؛ إذا كان الأمر كذلك ، كيف يمكنك جعلها أكثر فاعلية؟ يرجى تذكر أنه من المبكر جدًا تمكين طريقة مجموعة البيانات كدالة للصفحة ، بعد كل شيء ، لا تدعم العديد من المتصفحات هذه الوظيفة.