ทำความรู้จัก Custom Data Attribute ใน HTML5

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: ทำความรู้จัก Custom Data Attribute ใน HTML5

ทำความรู้จัก Custom Data Attribute ใน HTML5

โดย bellzeed » 29/06/2017 5:27 pm

Custom Data Attribute ความสามารถของ html5 ช่วยให้การ Embed ข้อมูลต่างๆ ไว้ใน HTML Element ทำได้สะดวกยิ่งขึ้น ประกอบไปด้วย 2 ส่วน ดังนี้
Attribute Name ต้องขึ้นต้นด้วย “data-” แล้วตามด้วยชื่ออะไรก็ได้ที่เราต้องการ ความยาวอย่างน้อย 1 ตัวอักษร และเป็น lower case
Attribute Value เป็นค่าอะไรก็ได้ ที่เราต้องการเก็บ

ตัวอย่างการใช้งาน Custom Data Attribute

โค้ด: เลือกทั้งหมด

<ul id="vegetable-seeds">
  <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
  <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
  <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
</ul>

สรุปการใช้ Custom Data Attribute
สามารถดึงข้อมูลจาก HTML Element ได้โดยตรง ทำให้ไม่ต้องพึ่ง Ajax Call ในการเชื่อมต่อฐานข้อมูล
Custom Data Attribute ถูกออกแบบมาเพื่อใช้เก็บข้อมูลสำหรับหน้า หรือ Application นั้นๆ เท่านั้น ไม่ใช่ Application ภายนอก ซึ่งตรงข้ามกับ Microformat
ไม่ควรใช้ Custom Data Attribute ในการอ้างอิงสำหรับใส่ Stylesheet ใดๆครับ

ข้างบน