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

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

Алар пайдалуу:

• JavaScript үчүн маалымат сактоо: JavaScript оңой эле бул маалыматтарды алууга жана динамикалык жүрүм-турум, элемент менен өз ара аракеттенүү же колдонмо бөлүктөрү арасында маалымат алмашуу үчүн колдонууга болот.

  <div id="user-profile" data-user-id="123" data-user-role="admin">
      Салам, admin!
  </div>
  

  // data-атрибуттардан маалымат алуу
  const userProfile = document.getElementById('user-profile');
  const userId = userProfile.dataset.userId; // "123"
  const userRole = userProfile.dataset.userRole; // "admin"
  

• Колдонуучунун өзгөчө атрибуттарын түзүү: HTML спецификациясына ылайык келбеген өзгөчө атрибуттарды ойлоп табуудан алыс, data-* колдонулат, бул кодду семантикалык жана валиддүү кылат.

• Стилдөө: CSS-селекторлор аркылуу атрибуттар боюнча элементтерди алардын data- атрибуттарындагы маанилерине ылайык стилизациялоо мүмкүн.

  <button data-status="active">Активдүү баскыч</button>
  <button data-status="inactive">Иштелбеген баскыч</button>
  

  /* data-атрибут боюнча стилизация */
  button[data-status="active"] {
      фон-боёгу: жашыл;
  }
  
  button[data-status="inactive"] {
      фон-боёгу: сүрөттөлгөн;
  }
  

• Фреймворктор жана китепканалар: Көптөгөн фронтенд-фреймворктор жана китепканалар data- атрибуттарды компоненттерди баштоо, параметрлерди өткөрүү же маалыматтарды байланыштыруу үчүн колдонушат (мисалы, Vue.js v-bind менен же React data- атрибуттары менен үчүнчү тарап китепканаларын интеграциялоо).

• Микроформаттар жана структураланган маалыматтар: Кээде data- атрибуттар микроформаттарды киргизүү же машиналар түшүнүүчү маалыматтарды белгилөө үчүн колдонулушу мүмкүн.

Жалпысынан, data- атрибуттар HTML элементтеринде кошумча маалыматтарды сактоонун ийкемдүү жана стандарттык ыкмасын камсыз кылат, бул JavaScript жана CSS аркылуу алардын менен иштөөдө жеңилдик берет.