عندما تنظر إلى HTML، غالبًا ما ترى استخدام دور البيانات، وموضوع البيانات، وما إلى ذلك. على سبيل المثال، يمكن تحقيق تأثير الرأس من خلال الكود التالي:
<div data-role=header> <h1>أنا العنوان</h1> </div>
لماذا يمكن لكتابة data-role=header تحقيق تأثير النص السفلي الأسود والنص المركزي؟
توفر هذه المقالة أبسط طريقة تنفيذ لمنح الجميع فهمًا بديهيًا لهذه الاستخدامات.
نكتب صفحة HTML ونقوم بتخصيص سمة data-chb=header ونأمل أن يكون لون خلفية منطقة div مع هذه السمة أسودًا، وأن يكون النص أبيضًا، وسيتم عرضه في وسط div سيتم عرض السمة المخصصة data-chb بالطريقة الافتراضية، ويكون رمز html كما يلي:
<body> <div data-chb=header> <h1>لقد استخدمت السمة المخصصة data-chb لـ div</h1> </div> <br/> <div> لم أستخدم السمة المخصصة data-chb , اعرضه كما تريد </div> </body>
لتحقيق تأثير العرض حيث يكون لون الخلفية أسود والنص أبيض وتكون الشاشة في المنتصف، نحدد ملف css التالي:
<style> .ui_header { لون الخلفية: أسود محاذاة النص: اللون الأبيض: الحدود: 1 بكسل الصلبة #000؛ثم نستخدم طريقة js التالية لإضافة تعريفات css ديناميكيًا وتغيير نمط عرض divs بسمات data-chb عند تحميل الصفحة:
<script type=text/javascript> window.onload=function(){ var elems = document.getElementsByTagName(div); if(elems!=null&&elems.length>0){ var length = elems.length; Control for(var i=0;i<length;i++){ var elem = elems[i]; // احصل على السمات المخصصة لعنصر التحكم var customAttr = elem.dataset.chb; // يمكنك أيضًا الحصول على السمات المخصصة بالطريقة التالية //var customAttr = elem.dataset[chb]; // إذا كانت قيمة رأس حددناها مسبقًا، فهذا يعني أنها يجب أن تكون كذلك تمت معالجتها if(customAttr==header ){ // أضف النمط elem.setAttribute(class,ui_header);بالطبع، بالإضافة إلى الوظائف المذكورة أعلاه، تحتوي هذه السمة أيضًا على وظائف أخرى، مثل إنشاء البيانات من خلال JS وملء البيانات وما إلى ذلك؛
تلخيصما ورد أعلاه هو سمة HTML5: 'data-' التي قدمها لك المحرر وآمل أن تكون مفيدة لك. إذا كانت لديك أية أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!