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';

input එකක් ලබා දී ඇත. එහි අවධානය අහිමි වූ විට ඇතුළත් කරන ලද අංකය පරීක්ෂා කරන්න. මෙම අංකය දහය දක්වා නම්, input එක අලුත් වර්ණයට වර්ණණ කරන්න, දහයේ සිට විසි දක්වා නම් - කහ වර්ණයට, තිස්ක් ඉක්මවා ගියහොත් - ලා රතු වර්ණයට.