Στυλισμός Στοιχείων σε JavaScript

Ας υποθέσουμε ότι έχουμε πολλές παραγράφους:

<p>κείμενο1</p>
<p>κείμενο2</p>
<p>κείμενο3</p>

Ας διατρέξουμε αυτές τις παραγράφους με βρόχο και στο τέλος κάθε παραγράφου ας προσθέσουμε έναν σύνδεσμο, upon clicking στον οποίο θα προστίθεται στο κείμενο της παραγράφου κάποιος στυλισμός. Για παράδειγμα, το κείμενο της παραγράφου θα γίνεται διαγραμμένο (αυτό γίνεται με την CSS ιδιότητα text-decoration).

Ας συζητήσουμε δύο αποχρώσεις μιας τέτοιας εργασίας.

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

Δεύτερον, κατά την υλοποίηση μιας τέτοιας εργασίας σας περιμένει μια έκπληξη. Για να κατανοήσουμε την ουσία της, ας δούμε τον HTML κώδικα των παραγράφων μετά την προσθήκη των συνδέσμων:

<p>κείμενο1<a href="">σύνδεσμος</a></p>
<p>κείμενο2<a href="">σύνδεσμος</a></p>
<p>κείμενο3<a href="">σύνδεσμος</a></p>

Ας φανταστούμε τώρα ότι upon clicking στο σύνδεσμο το κείμενο της παραγράφου θα διαγραφεί. Ωστόσο, ο σύνδεσμος σε αυτήν την περίπτωση είναι επίσης μέρος της παραγράφου και θα διαγραφεί κι αυτός! Πιθανότατα μια τέτοια επίδραση δεν είναι αυτό που θέλουμε. Θέλουμε το κείμενο να διαγράφεται, αλλά ο σύνδεσμος - όχι.

Για να λύσουμε το πρόβλημα, απλά πρέπει να τυλίξουμε το κείμενο της παραγράφου στην ετικέτα span, έτσι:

<p><span>κείμενο1</span><a href="">σύνδεσμος</a></p>
<p><span>κείμενο2</span><a href="">σύνδεσμος</a></p>
<p><span>κείμενο3</span><a href="">σύνδεσμος</a></p>

Δίνεται ο ακόλουθος HTML κώδικας:

<p>κείμενο1</p>
<p>κείμενο2</p>
<p>κείμενο3</p>

Προσθέστε στο τέλος κάθε παραγράφου έναν σύνδεσμο, upon κλικ στον οποίο το κείμενο της παραγράφου θα γίνεται διαγραμμένο (αλλά ο σύνδεσμος - όχι).

Τροποποιήστε την προηγούμενη εργασία έτσι ώστε μετά το πάτημα στον σύνδεσμο αυτός ο σύνδεσμος να διαγράφεται από την παράγραφο (και το κείμενο της παραγράφου να γίνεται διαγραμμένο).

Δίνεται κάποιος HTML πίνακας. Προσθέστε σε αυτόν τον πίνακα μια ακόμη στήλη με έναν σύνδεσμο. Upon clicking σε αυτόν τον σύνδεσμο η σειρά με αυτόν τον σύνδεσμο πρέπει να γίνει πράσινου φόντου.

Τροποποιήστε την προηγούμενη εργασία έτσι ώστε το πρώτο πάτημα στον σύνδεσμο να χρωματίζει τη σειρά σε πράσινο φόντο, και το δεύτερο πάτημα να ακυρώνει αυτήν την ενέργεια.