Στυλισμός με CSS κλάσεις σε JavaScript

Στο προηγούμενο μάθημα μάθαμε να αλλάζουμε τα CSS στυλ των στοιχείων μέσω αλλαγής του χαρακτηριστικού style. Στις περισσότερες περιπτώσεις αυτό δεν είναι πολύ καλή ιδέα. Το γεγονός είναι ότι, εάν διασκορπίσουμε τα CSS στυλ στον κώδικα JavaScript, στο μέλλον θα είναι προβληματικό να αλλάξουμε το σχεδιασμό του site, αφού θα πρέπει να ψάξουμε τον κώδικα JavaScript για να βρούμε τα στυλ που έχουν "καλυφθεί" εκεί.

Πιο βολικό για τη μελλοντική συντήρηση θα είναι να προσθέτουμε ή να αφαιρούμε από το στοιχείο CSS κλάσεις, στυλιζόντάς τα έτσι με τον επιθυμητό τρόπο.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε μερικές παραγράφους:

<p>κείμενο1</p>
<p>κείμενο2</p>
<p>κείμενο3</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, που υποδεικνύει ξεκάθαρα το επιθυμητό από εμάς χρώμα.

Δίνεται μια παράγραφος. Δίνονται κουμπιά 'διαγράμμιση', 'κάντο έντονο', 'κάντο κόκκινο'. Ας γίνει έτσι ώστε με πάτημα σε κάθε κουμπί η δεδομένη ενέργεια να συμβαίνει στην παράγραφο (γίνεται κόκκινη, για παράδειγμα).