Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Data attributes (also called data-* attributes) let you store custom data directly in HTML elements without using extra hidden fields or JavaScript objects. They're perfect for storing metadata, configuration, state information, and any custom data your app needs.
<!-- HTML -->
<div data-user-id="123" data-role="admin">User Info</div>
<!-- JavaScript Access -->
element.dataset.userId; // "123"
element.dataset.role; // "admin"
<!-- CSS Selector -->
[data-role="admin"] { color: red; }data- followed by lowercase letters, numbers, dashes, dots, colons, or underscores. In JavaScript, camelCase is used: data-user-name becomes dataset.userNameAdd data-* attributes to your HTML elements
Use element.dataset to read/write values
Target elements using [data-*] selectors
When accessing data attributes via JavaScript, dashes are automatically converted to camelCase:
data-user-namedata-product-iddata-is-activedataset.userNamedataset.productIddataset.isActiveStore and retrieve custom data with the dataset API
<div class="user-card"
data-user-id="42"
data-username="johndoe"
data-role="admin">
<h3>John Doe</h3>
<button onclick="showUserInfo(this)">Show Info</button>
<div id="info"></div>
</div>Loading preview...
Use data attributes as CSS selectors for conditional styling
<div class="status-container">
<div class="status-card" data-status="success">
<h4>Payment Successful</h4>
<p>Your order has been confirmed</p>
</div>
<div class="status-card" data-status="warning">
<h4>Pending Review</h4>
<p>Your submission is under review</p>
</div>
<div class="status-card" data-status="error">
<h4>Action Required</h4>
<p>Please update your payment method</p>
</div>
</div>Loading preview...
Filter elements based on their data attributes
<div class="filter-demo">
<div class="filters">
<button onclick="filterProducts('all')">All</button>
<button onclick="filterProducts('electronics')">Electronics</button>
<button onclick="filterProducts('clothing')">Clothing</button>
<button onclick="filterProducts('books')">Books</button>
</div>
<div class="products">
<div class="product" data-category="electronics" data-price="299">
<strong>Wireless Mouse</strong>
<span>$299</span>
</div>
<div class="product" data-category="clothing" data-price="49">
<strong>Cotton T-Shirt</strong>
<span>$49</span>
</div>
<div class="product" data-category="electronics" data-price="599">
<strong>Keyboard</strong>
<span>$599</span>
</div>
<div class="product" data-category="books" data-price="25">
<strong>JavaScript Guide</strong>
<span>$25</span>
</div>
<div class="product" data-category="clothing" data-price="89">
<strong>Denim Jeans</strong>
<span>$89</span>
</div>
<div class="product" data-category="books" data-price="35">
<strong>CSS Mastery</strong>
<span>$35</span>
</div>
</div>
</div>Loading preview...
Track user interactions with data attributes
<div class="tracking-demo">
<h3>E-commerce Actions</h3>
<button class="track-btn"
data-event="click"
data-category="product"
data-action="view"
data-label="Laptop Pro">
View Product
</button>
<button class="track-btn"
data-event="click"
data-category="cart"
data-action="add"
data-label="Laptop Pro">
Add to Cart
</button>
<button class="track-btn"
data-event="click"
data-category="checkout"
data-action="proceed"
data-label="Purchase">
Checkout
</button>
<div id="tracking-log">
<strong>Event Log:</strong>
<div id="log-entries"></div>
</div>
</div>Loading preview...
// Using dataset (recommended)
element.dataset.userId;
// Using getAttribute
element.getAttribute('data-user-id');
// Check if exists
'userId' in element.dataset;// Using dataset (recommended)
element.dataset.userId = '123';
// Using setAttribute
element.setAttribute('data-user-id', '123');
// Delete attribute
delete element.dataset.userId;/* Exact match */
[data-status="active"] { }
/* Contains value */
[data-role~="admin"] { }
/* Starts with */
[data-id^="user"] { }
/* Ends with */
[data-file$=".pdf"] { }// Find by data attribute
document.querySelector('[data-id="123"]');
// Find all with attribute
document.querySelectorAll('[data-active]');
// Complex selector
document.querySelectorAll('[data-role="admin"][data-verified="true"]');| Browser | Data Attributes | dataset API | CSS Selectors |
|---|---|---|---|
| Chrome | 8+ | 8+ | Full |
| Firefox | 6+ | 6+ | Full |
| Safari | 6+ | 6+ | Full |
| Edge | 12+ | 12+ | Full |
| Opera | 11+ | 11+ | Full |
dataset API provides a clean, convenient way to access them in JavaScript.Create custom data attributes and access them with JavaScript