CSS դասերի միջոցով ոճավորումը JavaScript-ում

Նախորդ դասում մենք սովորեցինք փոխել տարրերի CSS ոճերը՝ փոխելով style ատրիբուտը։ Հաճախ դա այնքան էլ լավ գաղափար չէ։ Բանն այն է, որ եթե CSS ոճերը ցրվեն JavaScript կոդի մեջ, ապա հետագայում դժվար կլինի կայքի դիզայնը փոխել, քանի որ ստիպված կլինենք խուզարկել JavaScript կոդը՝ այնտեղ ամրացված ոճերը գտնելու համար։

Հետագա սպասարկման համար ավելի հարմար կլինի տարրին ավելացնել կամ հեռացնել CSS դասեր, դրանով իսկ դրանք ոճավորելով ցանկալի ձևով։

Դիտարկենք օրինակով։ Ենթադրենք ունենք մի քանի պարբերություններ.

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

Եկեք այնպես անենք, որ ցանկացած պարբերության վրա կտտացնելիս այդ պարբերությունը ներկվի ինչ-որ գույնով, օրինակ՝ կանաչ։ Դրա համար CSS ֆայլում ստեղծենք պարբերությունները ներկելու համար նախատեսված հատուկ դաս.

.colored {
	color: green;
}

Դասի օգտագործման առավելությունն այն է, որ այժմ հեշտությամբ կարելի է փոխել ցանկալի գույնը - դրա համար պարզապես անհրաժեշտ կլինի փոփոխություն մտցնել CSS ֆայլում, առանց JavaScript կոդը խուզարկելու։ Հատկապե հարմար է դա այն դեպքում, երբ JavaScript կոդը գրում եք դուք, իսկ հետագայում այն ոճավորելու է մեկ այլ մարդ (հնարավոր է ավելի ցածր որակավորում ունեցող անձ, ով կարողանում է աշխատել միայն CSS-ի հետ)։

Այսպիսով, այժմ, դասի ներդրումից հետո, ցանկացած պարբերության վրա կտտացնելիս կարելի է փոխել նրա գույնը՝ պարզապես ավելացնելով նրան մեր դասը.

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // ավելացնում ենք պարբերությանը դասը
	});
}

Բացատրեք, թե ինչու եմ ես ընտրել դասի անվանման համար colored բառը, և ոչ թե green բառը, որը հստակ ցույց է տալիս մեր ցանկալի գույնը։

Տրված է պարբերություն։ Տրված են 'գծել', 'հաստացնել', 'կարմիր դարձնել' կոճակները։ Եկեք յուրաքանչյուր կոճակի սեղմման դեպքում տրված գործողությունը կատարվի պարբերության հետ (դառնա կարմիր, օրինակ)։