ডাটা- অ্যাট্রিবিউটের মাধ্যমে জাভাস্ক্রিপ্টে স্টাইল পরিবর্তন
পূর্ববর্তী পাঠে বর্ণিত সমস্যার সমাধান করার জন্য,
আমরা এলিমেন্টকে ক্লাস দেব না, বরং
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';
একটি ইনপুট দেওয়া আছে। ফোকাস হারানো হলে এতে প্রবেশ করানো সংখ্যাটি পরীক্ষা করুন। যদি সংখ্যাটি দশের কম হয়, তাহলে ইনপুটটি সবুজ রং এ রাঙান, যদি দশ থেকে বিশ হয় - হলুদ রং এ, আর যদি বিশের বেশি হয় - লাল রং এ।
