HTML / data-* attribute

data-* attribute

HTML элементэд нэмэлт өгөгдөл хадгалах шаардлага байнга гардаг. Жишээ нь товч дарахад аль бүтээгдэхүүний ID-г JavaScript-рүү дамжуулах хэрэгтэй болдог. Үүнд data-* attribute хамгийн тохиромжтой шийдэл юм.

Синтакс

data- угтвараас эхэлсэн дурын нэр ашиглаж болно:

html
<!-- data-<өөрийн нэр>="утга" -->
<button data-id="42" data-color="улаан" data-price="15000">
  Сагсанд нэмэх
</button>

<div data-user-id="101" data-role="admin">
  Хэрэглэгчийн карт
</div>

Нэрлэлтийн дүрэм:

  • Зөвхөн жижиг үсэг, тоо, зураас (-) ашиглана
  • data-userId буруу → data-user-id зөв
  • Утга нь дурын string байж болно

JavaScript-ээр унших — dataset API

JavaScript дахь dataset property нь data-* attribute-уудыг объект хэлбэрээр өгдөг. HTML-д зураасаар бичсэн нэр JavaScript-д camelCase болж хувирна:

html
<article
  data-post-id="99"
  data-author="Болд"
  data-published="2024-03-15"
  data-is-featured="true"
>
  <h2>Миний нийтлэл</h2>
</article>
javascript
const article = document.querySelector("article");

// data-post-id → dataset.postId
console.log(article.dataset.postId);      // "99"
// data-author → dataset.author
console.log(article.dataset.author);     // "Болд"
// data-is-featured → dataset.isFeatured
console.log(article.dataset.isFeatured); // "true"

Анхааруулга: dataset-ийн бүх утга string байна. Тоо эсвэл boolean хэрэгтэй бол хөрвүүлнэ:

javascript
const id = Number(article.dataset.postId);       // 99 (number)
const featured = article.dataset.isFeatured === "true"; // true (boolean)

JavaScript-ээр бичих

dataset-ээр утгыг өөрчлөх боломжтой:

javascript
article.dataset.author = "Дорж"; // data-author="Дорж" болно
article.dataset.viewCount = "120"; // data-view-count="120" нэмэгдэнэ

Бодит жишээ — товчны бүлэг

html
<div class="бүтээгдэхүүн-жагсаалт">
  <div class="карт" data-id="1" data-name="Цүнх" data-price="45000">
    <h3>Цүнх</h3>
    <p>45,000 ₮</p>
    <button class="сагс-товч">Сагсанд нэмэх</button>
  </div>

  <div class="карт" data-id="2" data-name="Малгай" data-price="12000">
    <h3>Малгай</h3>
    <p>12,000 ₮</p>
    <button class="сагс-товч">Сагсанд нэмэх</button>
  </div>
</div>

<script>
  document.querySelectorAll(".сагс-товч").forEach((товч) => {
    товч.addEventListener("click", (event) => {
      // Товчны эцэг элементээс (карт) өгөгдлийг авна
      const карт = event.target.closest(".карт");
      const бүтээгдэхүүн = {
        id: Number(карт.dataset.id),
        name: карт.dataset.name,
        price: Number(карт.dataset.price),
      };
      console.log("Сагсанд нэмэв:", бүтээгдэхүүн);
    });
  });
</script>

CSS-тэй хослуулах

data-* attribute-уудыг CSS selector-д ашиглаж болно:

css
/* data-role="admin" бол ногоон хүрээ */
[data-role="admin"] {
  border: 2px solid green;
}

/* data-color утгаар ялгах */
[data-color="улаан"] {
  background-color: #fee2e2;
}

data-* vs class vs id

  • id — хуудсанд нэг удаа байх өвөрмөц таниулагч (JavaScript, anchor link-д)
  • class — загвар (CSS) болон JS-ийн сонголтод
  • data-* — JavaScript-рүү нэмэлт өгөгдөл дамжуулахад; CSS-д ашиглахыг зөвлөдөггүй

Дараагийн хичээлд:

Accessibility буюу хөгжлийн бэрхшээлтэй хэрэглэгчдэд зориулсан HTML бичих арга — aria-label, role, tabindex зэрэг attribute-уудыг үзнэ.

← Өмнөх хичээлiframeДараах хичээл →Accessibility үндэс (aria)