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');