data-* એટ્રિબ્યુટ્સ તમને કોઈપણ HTML તત્વ પર કસ્ટમ, ખાનગી ડેટા સંગ્રહ કરવાની મંજૂરી આપે છે. આ DOM પર મેટાડેટા જોડવાનો એક માનક માર્ગ છે જે JavaScript વાંચી શકે છે, બિન-માનક એટ્રિબ્યુટ્સ અથવા ક્લાસનો દુરુપયોગ કર્યા વિના.
html
Edit
data-* એટ્રિબ્યુટ્સ તમને કોઈપણ HTML તત્વ પર કસ્ટમ, ખાનગી ડેટા સંગ્રહ કરવાની મંજૂરી આપે છે. આ DOM પર મેટાડેટા જોડવાનો એક માનક માર્ગ છે જે JavaScript વાંચી શકે છે, બિન-માનક એટ્રિબ્યુટ્સ અથવા ક્લાસનો દુરુપયોગ કર્યા વિના.
Edit
dataset મારફતે JavaScript માં વાંચવું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);
});
પ્રતિેક તત્વ પર id સંગ્રહ કરવાથી એક પેરેન્ટ લિસનર બધી વસ્તુઓ સંભાળી શકે છે.
data-* એ સર્વર ડેટાને ક્લાયંટ-સાઇડ JS માટે DOM માં પસાર કરવાનો (વધારાની API કોલ વિના), ઇવેન્ટ ડેલિગેશન સેટ કરવાનો અને CSS સ્થિતિ ચલાવવાનો સ્વચ્છ, માનક-સંમત માર્ગ છે — બિન-માનક એટ્રિબ્યુટ્સ બનાવ્યા વિના જે HTML અમાન્ય બનાવી દેશે.
ત્યાં મોટું અથવા સંવેદનશીલ ડેટા સંગ્રહ કરશો નહીં; તે માર્કআપમાં દૃશ્યમાન છે.