data-* বৈশিষ্ট্য আপনাকে যেকোনো HTML উপাদানে কাস্টম, ব্যক্তিগত ডেটা সংরক্ষণ করতে দেয়। এটি DOM-তে মেটাডেটা সংযুক্ত করার একটি মান উপায় যা JavaScript পড়তে পারে, অ-মানক বৈশিষ্ট্য বা ক্লাস অপব্যবহার ছাড়াই।
html
Edit
dataset এর মাধ্যমে তাদের পড়াconst btn = document.querySelector("button");
btn.dataset.id; // "42"
btn.dataset.userRole; // "admin" ← kebab-case becomes camelCase
btn.dataset.isActive; // "true" ← always a STRING
// writing updates the attribute too
btn.dataset.id = "99"; // sets data-id="99" in the DOM
দুটি মূল নিয়ম: data-user-role কে dataset.userRole হিসাবে অ্যাক্সেস করা হয় (ড্যাশগুলি camelCase-এ পরিণত হয়), এবং প্রতিটি মান একটি স্ট্রিং — প্রয়োজন অনুযায়ী রূপান্তর করুন (Number(btn.dataset.id), btn.dataset.isActive === "true")।
button[data-is-active="true"] { font-weight: bold; }
button::after { content: attr(data-id); } /* display the value */
list.addEventListener("click", (e) => {
const id = e.target.dataset.id; // know which item was clicked
if (id) deleteItem(id);
});
প্রতিটি উপাদানে আইডি সংরক্ষণ করার অর্থ হল পিতামাতার উপর একটি শ্রবণকারী সমস্ত আইটেম পরিচালনা করতে পারে।
data-* হল সার্ভার ডেটা ক্লায়েন্ট-সাইড JS-এ DOM-তে পাস করার জন্য পরিষ্কার, মান-সম্মত উপায় (অতিরিক্ত API কল ছাড়াই), event delegation তারযুক্ত করতে, এবং CSS অবস্থা চালনা করতে — অ-মানক বৈশিষ্ট্য উদ্ভাবন ছাড়াই যা HTML কে অবৈধ করে তুলবে।
সেখানে বড় বা সংবেদনশীল ডেটা সংরক্ষণ করবেন না; এটি মার্কআপে দৃশ্যমান।