الصفات العالمية (Global Attributes) تعمل مع جميع عناصر HTML:
• id: معرّف فريد في الصفحة كلها. للـ CSS (#id)، JavaScript، وروابط المرساة (#section). • class: تصنيف — يمكن تكراره. للـ CSS (.class) والـ JavaScript. • style: تنسيق CSS مباشر (تجنّبه قدر الإمكان). • title: نص tooltip يظهر عند التحويم. • lang: اللغة (مهم للـ SEO والقراءة الصوتية). • dir: اتجاه النص (rtl/ltr/auto). • tabindex: ترتيب Tab. 0=طبيعي، -1=يمنع Tab، 1-32767=ترتيب محدد. • hidden: يخفي العنصر (مثل display:none). • data-*: صفات مخصصة لتخزين بيانات. يُقرأ بـ dataset. • contenteditable: يجعل العنصر قابلاً للتحرير. • draggable: يتيح السحب والإفلات.',
| 1 | <!-- id و class --> |
| 2 | <div id="main-hero" class="hero section bg-dark text-white"> |
| 3 | <h1>العنوان</h1> |
| 4 | </div> |
| 5 | |
| 6 | <!-- title: tooltip --> |
| 7 | <button title="انقر لحفظ التغييرات">💾 حفظ</button> |
| 8 | |
| 9 | <!-- lang: لغة مختلفة --> |
| 10 | <p>العنوان بالإنجليزية: <span lang="en">Nouvil Platform</span></p> |
| 11 | |
| 12 | <!-- data-*: بيانات مخصصة --> |
| 13 | <div |
| 14 | data-user-id="42" |
| 15 | data-role="admin" |
| 16 | data-last-login="2024-06-15" |
| 17 | id="user-profile" |
| 18 | > |
| 19 | أحمد محمد |
| 20 | </div> |
| 21 | |
| 22 | <script> |
| 23 | const el = document.getElementById('user-profile'); |
| 24 | console.log(el.dataset.userId); // "42" |
| 25 | console.log(el.dataset.role); // "admin" |
| 26 | console.log(el.dataset.lastLogin); // "2024-06-15" (camelCase) |
| 27 | </script> |
| 28 | |
| 29 | <!-- tabindex --> |
| 30 | <div tabindex="0" role="button" onclick="handleClick()"> |
| 31 | زر مخصص وصول |
| 32 | </div> |
| 33 | |
| 34 | <!-- hidden --> |
| 35 | <div hidden id="error-message">خطأ في الاتصال</div> |
مثال 1: data-* في تطبيق عملي
| 1 | <!-- قائمة منتجات بـ data-* --> |
| 2 | <ul class="product-list"> |
| 3 | <li |
| 4 | data-product-id="101" |
| 5 | data-price="99" |
| 6 | data-category="courses" |
| 7 | data-in-stock="true" |
| 8 | class="product-item" |
| 9 | > |
| 10 | <h3>كورس HTML الشامل</h3> |
| 11 | <p>السعر: 99 جنيه</p> |
| 12 | <button class="add-to-cart">أضف للسلة</button> |
| 13 | </li> |
| 14 | |
| 15 | <li |
| 16 | data-product-id="102" |
| 17 | data-price="149" |
| 18 | data-category="courses" |
| 19 | data-in-stock="false" |
| 20 | class="product-item" |
| 21 | > |
| 22 | <h3>كورس CSS المتقدم</h3> |
| 23 | <p>السعر: 149 جنيه</p> |
| 24 | <button class="add-to-cart" disabled>نفد المخزون</button> |
| 25 | </li> |
| 26 | </ul> |
| 27 | |
| 28 | <script> |
| 29 | document.querySelectorAll('.add-to-cart').forEach(btn => { |
| 30 | btn.addEventListener('click', () => { |
| 31 | const item = btn.closest('.product-item'); |
| 32 | const { productId, price, category } = item.dataset; |
| 33 | addToCart({ productId, price, category }); |
| 34 | }); |
| 35 | }); |
| 36 | </script> |