JavaScript में data- एट्रिब्यूट के माध्यम से स्टाइल बदलना

पिछले पाठ में वर्णित समस्या को हल करने के लिए, हम एलिमेंट को क्लास नहीं देंगे, बल्कि data- एट्रिब्यूट का मान बदलेंगे। यह इसलिए सुविधाजनक होगा क्योंकि ऐसा एट्रिब्यूट केवल एक ही मान रख सकता है और नया मान लिखने पर पुराना मान अपने आप मिट जाता है।

उदाहरण के लिए, हम सफल स्टाइल इस तरह सेट करेंगे:

html<div id="elem" data-type="success">
  text
</div>

और त्रुटि के लिए स्टाइल इस तरह:

html<div id="elem" data-type="error">
  text
</div>

हम अपनी स्थितियों की स्टाइल एट्रिब्यूट सेलेक्टर्स के माध्यम से सेट करेंगे:

css[data-type="success"] {
  color: green;
}
[data-type="warning"] {
  color: orange;
}
[data-type="error"] {
  color: red;
}

अब हम आसानी से अपने एलिमेंट को सफल रंग में रंग सकते हैं:

javascriptelem.dataset.type = 'success';

और हम इसे त्रुटि रंग में इस तरह रंगेंगे:

javascriptelem.dataset.type = 'error';