JavaScript හි පංති මගින් ශෛලීකරණය

style ගුණාංගය හරහා අංග ශෛලීකරණය කිරීම සමහර විට පහසු වුවද, බොහෝ විට - එය වඩාත්ම යෝග්‍ය අදහසක් නොවේ. ගැටලුව නම්, මෙම ශෛලී JavaScript ගොනුව තුළ විසිරී ඇති අතර ඒවා වෙනස් කිරීමට අපහසු වීමයි. CSS ගොනුවල ශෛලී සකසා ගැනීම වඩාත් පහසුය, මන්ද එමගින් ඒවා පහසුවෙන් වෙනස් කළ හැකිය, JavaScript කේතය හා නොගැටී.

උදාහරණයක් ලෙස, යම් පණිවිඩයක් පෙන්වන අංගයක් අප සතුව ඇතැයි සිතමු. පණිවිඩය "හොඳ" විය හැකි අතර එය පෙන්වන්නේ කොළ පැහැයෙන් සහ "නරක" විය හැකි අතර එය පෙන්වන්නේ රතු පැහැයෙන්. එවැනි අවස්ථාවක හොඳම විසඳුම වනුයේ ඒ සඳහා අදාළ CSS පංති සෑදීමයි:

css.success {
  color: green;
}
.error {
  color: red;
}

දැන් "හොඳ" පණිවිඩය පෙන්වීමේදී අපි අංගයට "හොඳ" පන්තිය ලබා දෙන්නෙමු:

javascriptelem.textContent = 'good';
elem.classList.add('success');

"නරක" පණිවිඩය පෙන්වීමේදී අපි අංගයට "නරක" පන්තිය ලබා දෙන්නෙමු:

javascriptelem.textContent = 'bad';
elem.classList.add('error');