HTMLде data атрибуттары эмне үчүн колдонулат?

data-* атрибуттары визуалдык көрүнүшү жок колдонуучу белгилерине сактоо үчүн колдонулат, түз эле HTML элементтеринде.

Негизги колдонуу максаттары:

• Маалыматка JavaScript/CSS аркылуу жетүү: Алар элементтин маалыматтарын оңой алуу жана иштетүү үчүн JavaScript (element.dataset) аркылуу же CSS селекторлорунда ([data-attribute="value"]) колдонуу мүмкүнчүлүгүн берет.
• Мета-маалыматтарды сактоо: Элементке байланыштуу кошумча маалыматтарды сактоо үчүн ыңгайлуу (мисалы, продукт ID, колдонуучу түрү, абал).
• Өзгөчө компоненттер түзүү: Алар JavaScript менен ишке ашырылган өзгөчө компоненттердин жүрүм-турумун жана мүнөздөмөлөрүн аныктоо үчүн колдонулушу мүмкүн.
• Семантикти жакшыртуу: Мазмунга байланыштуу белгилүү бир маалыматтарды сүрөттөп, семантикти жогорулатуу мүмкүн.

HTMLде колдонуу мисалы:

<div data-product-id="123" data-category="electronics">
  Смартфон
</div>

JavaScript аркылуу жетүү:

// Элементти алуу
const productElement = document.querySelector('div');

// data атрибуттарына жетүү
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

CSSте колдонуу:

/* data-category="electronics" болгон элементтер үчүн стили */
[data-category="electronics"] {
  border: 1px solid blue;
}