Custom Data Attributes
The data-* attribute convention allows developers to attach custom data to HTML elements. JavaScript can access these values through the element's dataset property.
Using data-*
<button data-user-id="42" data-role="admin">View User</button>\n\n<script>\n const button = document.querySelector('button');\n console.log(button.dataset.userId);\n console.log(button.dataset.role);\n</script>💡 data-user-id becomes dataset.userId and data-role becomes dataset.role.
Key Takeaways
- Custom attributes should use the data-* convention.
- JavaScript accesses data-* values through dataset.
Knowledge Check
How is data-user-id accessed through dataset?