JavaScript භාවිතයෙන් CSS පංති මගින් ශෛලීකරණය කිරීම

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

අනාගත නඩත්තුව සඳහා වඩාත් පහසු වනුයේ අංගයට CSS පංති එකතු කිරීම හෝ ඉවත් කිරීමයි, එමගින් ඒවා අවශ්‍ය ආකාරයට ශෛලීකරණය කරයි.

අපි උදාහරණයක් දෙස බලමු. අප සතුව ඡේද කිහිපයක් තිබිය යුතුය:

<p>text1</p>
<p>text2</p>
<p>text3</p>

ඕනෑම ඡේදයක් මත ක්ලික් කිරීමේදී, එම ඡේදය යම් වර්ණයකට, උදාහරණයක් ලෙස, කොළ පැහැයට වර්ණවත් කරන ලෙස කරමු. මෙය සඳහා CSS ගොනුවේ ඡේද වර්ණවත් කිරීම සඳහා විශේෂ පංතියක් සාදමු:

.colored {
	color: green;
}

පංතිය භාවිතා කිරීමේ ප්‍රතිලාභය වන්නේ, දැන් අවශ්‍ය වර්ණය පහසුවෙන් වෙනස් කළ හැකි වීමයි - මෙය සඳහා JavaScript කේතය සොයා නොගෙන සරලව CSS ගොනුවේ වෙනස්කම් කිරීමට අවශ්‍ය වනු ඇත. මෙය විශේෂයෙන් පහසු වන්නේ, JavaScript කේතය ඔබ ලියන අතර, පසුව එය ශෛලීකරණය කරනු ලබන්නේ වෙනත් කෙනෙකු විසින් නම් (සමහර විට අඩු සුදුසුකම් ඇති පුද්ගලයෙක්, කෙනෙකුට CSS සමඟ පමණක් වැඩ කිරීමට හැකිය).

ඉතින්, දැන්, පංතිය හඳුන්වා දීමෙන් පසු, ඕනෑම ඡේදයක් මත ක්ලික් කිරීමෙන්, අපගේ පංතිය එයට එකතු කිරීමෙන් එහි වර්ණය වෙනස් කළ හැකිය:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // ඡේදයට පංතිය එකතු කරමු
	});
}

පංතිය නම් කිරීම සඳහා green යන වචනය වෙනුවට, අපට අවශ්‍ය වර්ණය සැඟවුණු colored යන වචනය මා තෝරා ගත්තේ ඇයි විස්තර කරන්න.

ඡේදයක් ලබා දී ඇත. බොත්තම් 'කරකවන්න', 'තද කරන්න', 'ලා රතු කරන්න' ලබා දී ඇත. එක් එක් බොත්තම ඔබා ගැනීමේදී, ලබා දී ඇති ක්‍රියාව ඡේදය සමඟ සිදු වේ (උදාහරණයක් ලෙස, රතු පැහැයට පත් වේ).