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');
Տրված են թվեր պարունակող պարբերություններ: Ցիկլով անցեք այս պարբերությունների վրայով և զույգ թվեր պարունակող պարբերությունները ներկեք կարմիր գույնով, իսկ կենտ թվեր պարունակողները՝ կանաչ:
