JavaScript හි පංති මගින් ශෛලීකරණය
style ගුණාංගය හරහා අංග ශෛලීකරණය කිරීම
සමහර විට පහසු වුවද, බොහෝ විට - එය වඩාත්ම
යෝග්ය අදහසක් නොවේ. ගැටලුව නම්, මෙම ශෛලී
JavaScript ගොනුව තුළ විසිරී ඇති අතර
ඒවා වෙනස් කිරීමට අපහසු වීමයි.
CSS ගොනුවල ශෛලී සකසා ගැනීම වඩාත් පහසුය,
මන්ද එමගින් ඒවා පහසුවෙන් වෙනස් කළ හැකිය,
JavaScript කේතය හා නොගැටී.
උදාහරණයක් ලෙස, යම් පණිවිඩයක් පෙන්වන අංගයක් අප සතුව ඇතැයි සිතමු. පණිවිඩය "හොඳ" විය හැකි අතර එය පෙන්වන්නේ කොළ පැහැයෙන් සහ "නරක" විය හැකි අතර එය පෙන්වන්නේ රතු පැහැයෙන්. එවැනි අවස්ථාවක හොඳම විසඳුම වනුයේ ඒ සඳහා අදාළ CSS පංති සෑදීමයි:
.success {
color: green;
}
.error {
color: red;
}
දැන් "හොඳ" පණිවිඩය පෙන්වීමේදී අපි අංගයට "හොඳ" පන්තිය ලබා දෙන්නෙමු:
elem.textContent = 'good';
elem.classList.add('success');
"නරක" පණිවිඩය පෙන්වීමේදී අපි අංගයට "නරක" පන්තිය ලබා දෙන්නෙමු:
elem.textContent = 'bad';
elem.classList.add('error');
සංඛ්යා සහිත ඡේද ලබා දී ඇත. මෙම ඡේද චක්රයකින් හරහා ගොස්, ඉරට්ටේ සංඛ්යා අඩංගු ඡේද, රතු පැහැයට වර්ණ කරන්න, ඔත්තේ සංඛ්යා අඩංගු ඡේද - කොළ පැහැයට.
