Πλεονέκτημα του στυλιστικού με CSS κλάσεις στο JavaScript
Η χρήση κλάσεων αντί της αλλαγής στυλ άμεσα έχει ένα ακόμη πλεονέκτημα. Με μια εύκολη κίνηση του χεριού μπορείτε να κάνετε έτσι ώστε τα στυλ των στοιχείων να εναλλάσσονται.
Για παράδειγμα, μπορείτε να κάνετε έτσι ώστε στο πρώτο
κλικ σε μια παράγραφο να χρωματίζεται με ένα συγκεκριμένο
χρώμα, και σε επαναλαμβανόμενο κλικ - να επιστρέφει
στο αρχικό του χρώμα. Για αυτό πρέπει απλά
να αλλάξετε την μέθοδο add με την μέθοδο toggle:
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', function() {
this.classList.toggle('colored');
});
}
Τροποποιήστε την προηγούμενη εργασία έτσι, ώστε το επαναλαμβανόμενο πάτημα στο κουμπί να ακυρώνει την δράση αυτού του κουμπιού.