شرح تفصيلي لبيانات HTML5-* السمات المخصصة

في attr وprop لـ jQuery، يُذكر أن الاستخدام غير الصحيح للخاصية في الإصدارات قبل IE9 سيؤدي إلى تسرب الذاكرة، كما أن الفرق بين السمة والخاصية مزعج للغاية في HTML5، تتم إضافة طريقة data-* لتخصيص السمات. ما يسمى بالبيانات-* هو في الواقع بادئة البيانات بالإضافة إلى اسم سمة مخصص يمكن تخزين البيانات باستخدام مثل هذه البنية. يمكن أن يؤدي استخدام data-* إلى حل الوضع الحالي للسمات المخصصة المربكة وغير المُدارة.

هناك طريقتان لإعداد البيانات-*، والتي يمكن كتابتها مباشرة على علامات عناصر HTML.

 <div id=test data-age=24> انقر هنا </div>

عصر البيانات هو سمة مخصصة بالطبع، يمكننا أيضًا تشغيلها من خلال JavaScript. سيكون للعناصر في HTML5 سمة مجموعة بيانات، وهي عبارة عن مجموعة من أزواج القيمة الرئيسية من نوع DOMStringMap.

 var test = document.getElementById('test'); test.dataset.my = 'Byron';

يؤدي هذا إلى إضافة سمة مخصصة لـ data-my إلى div. هناك شيئان يجب الانتباه إليهما عند استخدام JavaScript لتشغيل مجموعة البيانات.

1. نحتاج إلى إزالة البادئة data-* عند إضافة السمات أو قراءتها. مثل المثال أعلاه، لا نستخدم النموذج test.dataset.data-my = 'Byron';.

2. إذا كان اسم السمة يحتوي أيضًا على واصلة (-)، فيجب تحويله إلى تسمية حالة الجمل، ولكن إذا تم استخدام محدد في CSS، فسنحتاج إلى استخدام تنسيق الواصلة.

أضف محتوى إلى الكود الآن

 <style type=text/css> [data-birth-date] { لون الخلفية: #0f0; العرض:100px هامش:20px;

 test.dataset.birthDate = '19890615';

بهذه الطريقة، قمنا بتعيين السمة المخصصة لتاريخ ميلاد البيانات من خلال JavaScript، وأضفنا بعض الأنماط إلى القسم في ورقة أنماط CSS لرؤية التأثير.

عند القراءة، يتم أيضًا استخدام كائن مجموعة البيانات للحصول على السمات، ويجب أيضًا إزالة بادئة البيانات، ويجب تحويل الواصلات إلى تسمية حالة الجمل.

 var test = document.getElementById('test'); test.dataset.my = 'Byron'; test.dataset.birthDate = '19890615'; + this.dataset.age+' '+this.dataset.birthDate });

قد يتساءل بعض الطلاب عما إذا كان هناك أي اختلاف بين هذا وgetAttribute/setAttribute باستثناء التسمية، فلنلقِ نظرة.

 var test = document.getElementById('test'); test.dataset.birthDate = '19890615'; test.setAttribute('age', 25); log(test.getAttribute('data-age')); //24 console.log(test.getAttribute('data-birth-date')); //19890516 console.log(test.dataset.age); //24 console.log(test.dataset.sex);

من هذا يمكننا أن نرى أن كلاهما يعين السمات على السمات (هراء، وإلا يمكن أن يطلق عليها سمات مخصصة)، مما يعني أن getAttribute/setAttribute يمكن أن يعمل على جميع محتويات مجموعة البيانات، ومحتويات مجموعة البيانات ليست سوى مجموعة فرعية من السمات الخاصة الشيء هو التسمية، ولكن لا يوجد سوى سمات ذات بادئة البيانات في مجموعة البيانات (لا يوجد عمر = 25 عامًا).

فلماذا لا نزال نستخدم data-*؟ إحدى أكبر المزايا هي أنه يمكننا إدارة جميع السمات المخصصة بطريقة موحدة في كائن مجموعة البيانات، ومن الملائم جدًا اجتياز كل شيء دون التشتت، لذلك لا يزال من الجيد استخدامه.

الخبر السيئ هو أن توافق المتصفح مع data-* متشائم للغاية.

1. إنترنت إكسبلورر 11+
2. كروم 8+
3. فايرفوكس 6.0+
4. أوبرا 11.10+
5. سفاري 6+

من بينها، IE11+ يعمى أعين أصدقائي ببساطة، ويبدو أن هناك طريقًا طويلًا يجب قطعه لاستخدام هذه السمة بشكل كامل.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.