JAVASCRIPT
Getting and Setting Custom Data Attributes
Learn to effectively store and retrieve small custom data values directly on HTML elements using `dataset` for enhanced interactivity and state management.
function handleDataAttributes(elementId) {
const element = document.getElementById(elementId);
if (!element) {
console.error(`Element with ID '${elementId}' not found.`);
return;
}
// Getting a data attribute
const value = element.dataset.myCustomValue; // Access data-my-custom-value
console.log(`Initial data-my-custom-value: ${value}`);
// Setting/Updating a data attribute
element.dataset.myCustomValue = 'new-data-value';
element.dataset.anotherData = 'some-other-info'; // Creates data-another-data
console.log(`Updated data-my-custom-value: ${element.dataset.myCustomValue}`);
console.log(`New data-another-data: ${element.dataset.anotherData}`);
// Removing a data attribute
delete element.dataset.anotherData;
console.log(`data-another-data after removal: ${element.dataset.anotherData}`); // Will be undefined
}
// Example usage:
// <div id="myDataElement" data-my-custom-value="initial-value" data-user-id="123"></div>
// handleDataAttributes('myDataElement');
How it works: This snippet illustrates how to interact with HTML5 custom data attributes (attributes prefixed with `data-`). The `dataset` property on an HTMLElement provides a convenient DOMStringMap interface to access these attributes. You can retrieve values using `element.dataset.attributeName` (camelCase for `data-attribute-name`), set new values, or even remove them. This is extremely useful for storing small pieces of application-specific data directly on elements, eliminating the need for complex global variables or hidden input fields for UI state.