Τα χαρακτηριστικά data-* σας επιτρέπουν να αποθηκεύσετε προσαρμοσμένα, ιδιωτικά δεδομένα σε οποιοδήποτε HTML στοιχείο. Είναι ένας τυπικός τρόπος για να επισυνάψετε μεταδεδομένα στο DOM που η JavaScript μπορεί να διαβάσει, χωρίς να κατάχρηση μη τυπικά χαρακτηριστικά ή κλάσεις.
Edit
datasetconst 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 σε κάθε στοιχείο σημαίνει ότι ένα listener στο parent μπορεί να χειριστεί όλα τα στοιχεία.
data-* είναι ο καθαρός, συμμορφούμενος με τα πρότυπα τρόπος για να περάσετε δεδομένα διακομιστή στο DOM για JavaScript από την πλευρά του πελάτη (χωρίς έναν επιπλέον κλήση API), για να συνδέσετε event delegation, και για να οδηγήσετε κατάσταση CSS — χωρίς να εφεύρετε μη τυπικά χαρακτηριστικά που θα έκαναν το HTML άκυρο.
Μην αποθηκεύετε εκεί μεγάλα ή ευαίσθητα δεδομένα. είναι ορατά στη σήμανση.