แอตทริบิวต์สากลและ data-*

ใช้ประโยชน์จากแอตทริบิวต์ที่ทำงานได้ทุกที่ และเก็บข้อมูลของคุณเองไว้ใน HTML

7 นาที · 3 คำถาม

แอตทริบิวต์บางตัวทำงานได้บน เอลิเมนต์ใดก็ได้: นี่คือแอตทริบิวต์สากล คุณใช้ 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 กรณีใช้งานทั่วไป: รหัสสินค้า สถานะ UI การตั้งค่าคอมโพเนนต์

<article
  class="product-card"
  data-product-id="42"
  data-category="books"
  data-in-stock="true"
>
  <h2>HTML for pros</h2>
</article>

ในฝั่ง JavaScript แอตทริบิวต์เหล่านี้ถูกอ่านผ่านพร็อพเพอร์ตี้ dataset ระวังการแปลงอัตโนมัติ: kebab-case ของ HTML จะกลายเป็น camelCase ใน JavaScript ดังนั้น 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";

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. คุณอ่านแอตทริบิวต์ data-user-id ใน JavaScript อย่างไร?
   • element.dataset.userId
   • element.dataset.user-id
   • element.data.userId
   • element.getData("user-id")
2. แอตทริบิวต์ data-* มีไว้เพื่ออะไร?
   • เก็บข้อมูลกำหนดเองที่ JavaScript ของคุณอ่านได้
   • เร่งการโหลดข้อมูลของหน้าเว็บ
   • ส่งข้อมูลไปยังเซิร์ฟเวอร์เมื่อฟอร์มถูกส่ง
3. แอตทริบิวต์สากลตัวใดที่ซ่อนเอลิเมนต์เชิงความหมาย?
   • hidden
   • invisible
   • display