اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر

يوجد في الجافا سكربت attribute يسمى *-data وفي هذا attribute يمكننا تخزين البيانات لتعامل معها في شيقرات الجافا سكربت أنا بخصوص color بنحن بعد هذا attribute يمكننا إضافة أي كلمة توحي على نوع البيانات التي سوف يتم تخزينها . لذلك أصبح attribute باسم data-color وفيه سوف يتم حفظ اللون .

يمكنك البحث في جوجل عن  *-data وسوف تظهر لك عدّة نتائج بحث يمكنك قراءة المزيد حول attribute .

  • 0
نشر
  • تم تصميم HTML مع مراعاة القابلية للتوسعة للبيانات التي يجب أن ترتبط بعنصر معين ولكن لا يلزم أن يكون لها أي معنى محدد. تسمح لنا سمات data- * بتخزين معلومات إضافية حول عناصر HTML القياسية والدلالات دون الاختراقات الأخرى مثل السمات غير القياسية أو الخصائص الإضافية على DOM.
  • بناء syntax بسيط. أي سمة على أي عنصر يبدأ اسم السمة ب data- هي سمة بيانات. لنفترض أن لديك مقالًا وتريد تخزين بعض المعلومات الإضافية التي لا تحتوي على أي تمثيل مرئي. فقط استخدم سمات البيانات لذلك:
<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars"></article>
  • الوصول من javascript 

قراءة قيم هذه السمات في JavaScript بسيطة للغاية أيضًا. يمكنك استخدام getAttribute () مع اسم HTML الكامل لقراءتها ، لكن المعيار يحدد طريقة أبسط: DOMStringMap يمكنك قراءته عبر خاصية مجموعة البيانات.

للحصول على سمة بيانات من خلال كائن مجموعة البيانات ، احصل على الخاصية بجزء من اسم السمة بعد " data- " (لاحظ أنه يتم تحويل الشرطات إلى camelCase).

const article = document.querySelector("#electric-cars");
article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"

تفحص أكثر

 https://wiki.hsoub.com/CSS/attr

https://wiki.hsoub.com/HTML

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...