data-* Attributes
Custom data-* attributes store extra data on HTML elements. Access them via element.dataset in JavaScript.
HTML
Beginner
3 min read
Custom Data Attributes
Example
<button class="delete-btn"
data-user-id="42"
data-confirm-text="Really delete?"
data-redirect="/users">
Delete User
</button>
<script>
document.querySelectorAll(".delete-btn").forEach(btn => {
btn.addEventListener("click", function() {
const { userId, confirmText, redirect } = this.dataset;
if (confirm(confirmText)) {
fetch(`/api/users/${userId}`, { method: "DELETE" })
.then(() => location.href = redirect);
}
});
});
</script> Pro Tip
data-* attributes are great for passing server-side data into JavaScript without extra AJAX calls.