استفد من السمات التي تعمل في كل مكان وخزّن بياناتك الخاصة داخل الـ HTML.
افتح هذا الدرس في Kodokonبعض السمات تعمل على أي عنصر: هذه هي السمات العامة. أنت تستخدم بالفعل id و class؛ أضف إلى صندوق أدواتك hidden (يخفي العنصر) و lang (يشير إلى لغة مقطع) و title (تلميح عند التمرير) و tabindex (ترتيب تركيز لوحة المفاتيح).
<p lang="en" title="Original quote">
Stay hungry, stay foolish.
</p>
<div hidden id="cookie-banner" class="banner">
We use cookies.
</div>تحتاج إلى إرفاق بياناتك الخاصة بعنصر؟ لا تخترع أبدًا سمة من عندك: يحجز HTML سمات data-* لهذا الغرض بالضبط. تختار الاسم بعد الشرطة، بأحرف صغيرة بأسلوب kebab-case. حالات استخدام نموذجية: معرّف منتج، حالة واجهة، إعداد مكوّن.
<article
class="product-card"
data-product-id="42"
data-category="books"
data-in-stock="true"
>
<h2>HTML for pros</h2>
</article>على جانب جافاسكريبت، تُقرأ هذه السمات عبر خاصية dataset. انتبه إلى التحويل التلقائي: يتحول أسلوب kebab-case في HTML إلى camelCase في جافاسكريبت. فـ data-product-id يُقرأ بـ dataset.productId. القيم دائمًا سلاسل نصية، حتى "true" أو "42".
const card = document.querySelector(".product-card");
console.log(card.dataset.productId); // "42"
console.log(card.dataset.inStock); // "true"
card.dataset.state = "selected";