JavaScript में data- एट्रिब्यूट के माध्यम से स्टाइल बदलना
पिछले पाठ में वर्णित समस्या को हल करने के लिए,
हम एलिमेंट को क्लास नहीं देंगे, बल्कि
data- एट्रिब्यूट का मान बदलेंगे।
यह इसलिए सुविधाजनक होगा क्योंकि ऐसा एट्रिब्यूट
केवल एक ही मान रख सकता है
और नया मान लिखने पर पुराना मान अपने आप
मिट जाता है।
उदाहरण के लिए, हम सफल स्टाइल इस तरह सेट करेंगे:
<div id="elem" data-type="success">
text
</div>
और त्रुटि के लिए स्टाइल इस तरह:
<div id="elem" data-type="error">
text
</div>
हम अपनी स्थितियों की स्टाइल एट्रिब्यूट सेलेक्टर्स के माध्यम से सेट करेंगे:
[data-type="success"] {
color: green;
}
[data-type="warning"] {
color: orange;
}
[data-type="error"] {
color: red;
}
अब हम आसानी से अपने एलिमेंट को सफल रंग में रंग सकते हैं:
elem.dataset.type = 'success';
और हम इसे त्रुटि रंग में इस तरह रंगेंगे:
elem.dataset.type = 'error';
एक इनपुट दिया गया है। फोकस खोने पर इसमें दर्ज संख्या की जांच करें। यदि यह संख्या दस से कम है, तो इनपुट को हरे रंग में रंगें, यदि दस से बीस के बीच है - पीले रंग में, और यदि बीस से अधिक है - लाल रंग में।
