Στυλισμός με κλάσεις στο 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');