OnlineCBT
1. Custom Data Attributes: data-*
HTML5 introduced custom data attributes (prefixed with data-) to store extra, private custom data directly on HTML elements without hacking non-standard attributes or abusing CSS classes.
2. Structure and Syntax
The attribute name must start with data- followed by lowercase characters and hyphens:
3. Reading Custom Data via JavaScript dataset
In modern JavaScript, all data-* attributes are accessible through the element's dataset property:
const button = document.querySelector(".question-nav-btn");
// Accessing values
console.log(button.dataset.questionId); // "q-401"
console.log(button.dataset.subject); // "physics"
console.log(button.dataset.marks); // "4"
4. Styling Elements Based on Data Attributes
/* Highlight hard questions in exam palette */
button[data-difficulty="hard"] {
border-left: 4px solid #ef4444;
}
