Стылізацыя класамі ў 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');
Даны абзацы з лікамі. Перабярыце гэтыя абзацы цыклам і абзацы, якія змяшчаюць цотныя лікі, пакарайце ў чырвоны колер, а якія змяшчаюць няцотныя - у зялёны.