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