ใช้ Attributes ด้วย HTMLElement.dataset ง่ายกว่าที่คุณคิด !

 


คุณเคยใช้ attributes ที่ใช้เซตข้อมูลให้กับ Element ต่างๆเพื่อให้เป็นเงื่อนไขต่างกับระบบที่ต้องการเขียน
เช่น คุณต้องเซต เมนู onClick กับ Element ที่ต้องการโดนกำกับ attributes ให้กับ Element ว่า itemid อะไร

<div itemid="01"></div>

โดนวิธีเรียกคุณอาจใช้ 
    let attribute = element.getAttribute(attributeName);

โค๊ดยาวหรือป่าวลองใช้ dataset ดูหรือป่าวครับ 
แอตทริบิวต์ HTML data-*และ DOM ที่เกี่ยวข้อง dataset.property จะแก้ไขชื่อที่ใช้ร่วมกันตามตำแหน่งที่อ่านหรือเขียน: ใน HTML ชื่อแอตทริบิวต์ขึ้นต้นด้วยdata-. มีได้เฉพาะตัวอักษร ตัวเลข ขีดกลาง ( -) จุด ( ) .ทวิภาค ( :) และขีดล่าง ( _) อักษรตัวใหญ่ ASCII ( Aเป็น Z) จะถูกแปลงเป็นตัวพิมพ์เล็ก ตัวอย่างที่กว่า <div data-itemid="01" data-name="test"></div>

วิธีเรียกใช้

const dataAttrMap = element.dataset
dataAttrMap.itemid

ตัวอย่างผลลัพธ์

// 
dataAttrMap.itemid ===  01
// dataAttrMap.name === test

0 ความคิดเห็น

Earn money online

รวมเทคหาเงินออนไลย์ - หารวยได้เสริม

Is the Designer Facing Extinction?