Αυτή η μελέτη θα απεικονίσει τις μεθόδους για την αλλαγή του χρώματος του κειμένου σε JavaScript.
Πώς να αλλάξετε το χρώμα του κειμένου σε JavaScript;
Για να αλλάξετε το χρώμα του κειμένου σε JavaScript, χρησιμοποιήστε τις προκαθορισμένες μεθόδους JavaScript που αναφέρονται παρακάτω:
Ας εξηγήσουμε αυτές τις μεθόδους ξεχωριστά.
Μέθοδος 1: Αλλαγή χρώματος κειμένου Χρησιμοποιώντας την ιδιότητα style.color με τη μέθοδο getElementById()
Για να αλλάξετε το χρώμα του κειμένου, μπορείτε να χρησιμοποιήσετε το ' getElementById() μέθοδος με το « στυλ.χρώμα ” ιδιοκτησία. Σε ένα τέτοιο σενάριο, το στοιχείο κειμένου μπορεί να προσπελαστεί χρησιμοποιώντας τη μέθοδο getElementById() και στη συνέχεια να εφαρμόσει το χαρακτηριστικό χρώμα με τη βοήθεια της ιδιότητας style.color HTML.
Σύνταξη
Χρησιμοποιήστε τη δεδομένη σύνταξη για να αλλάξετε το χρώμα του κειμένου χρησιμοποιώντας την ιδιότητα χρώματος με τη βοήθεια της μεθόδου getElementById():
έγγραφο. getElementById ( 'ταυτότητα' ) . στυλ . χρώμα = 'χρώμα' ;Ο ' ταυτότητα ” είναι το αναγνωριστικό του στοιχείου που καθορίζεται για πρόσβαση στο στοιχείο κειμένου και, στη συνέχεια, αλλαγή του χρώματός του χρησιμοποιώντας την ιδιότητα style.color.
Κατευθυνθείτε προς το παρακάτω παράδειγμα για να κατανοήσετε τη δηλωμένη έννοια!
Παράδειγμα
Αρχικά, θα δημιουργήσουμε μια επικεφαλίδα χρησιμοποιώντας επισημάνετε και εκχωρήστε ένα αναγνωριστικό ' ταυτότητα ' που χρησιμοποιείται για πρόσβαση στο στοιχείο h4, στη συνέχεια, δημιουργήστε ένα κουμπί που καλεί μια συνάρτηση με το όνομα ' άλλαξε χρώμα() ” που ορίζεται σε ένα αρχείο JavaScript(JS) όταν ενεργοποιείται το συμβάν onclick του κουμπιού που προστέθηκε:
< h4 id = 'ταυτότητα' > Καλώς ήρθατε στο LinuxHint h4 >< τύπο κουμπιού = 'κουμπί' στο κλικ = 'άλλαξε χρώμα()' > Κάντε κλικ για να δείτε τη μαγεία κουμπί >
Στο αρχείο JS, ορίστε μια συνάρτηση με το όνομα ' άλλαξε χρώμα() ” και λάβετε την επικεφαλίδα περνώντας το αναγνωριστικό της στη μέθοδο getElementById() και, στη συνέχεια, αλλάξτε το χρώμα της:
λειτουργία αλλαγή χρώματος ( ) {έγγραφο. getElementById ( 'ταυτότητα' ) . στυλ . χρώμα = 'το κόκκινο' ;
}
Τέλος, καθορίστε την προέλευση του αρχείου JavaScript χρησιμοποιώντας την ετικέτα src στο αρχείο HTML:
< script src = './JSfile.js' γραφή >Μπορεί να φανεί από την έξοδο ότι όταν κάνετε κλικ στο κουμπί που προστέθηκε, το στοιχείο κειμένου άλλαξε το χρώμα του σε ' το κόκκινο ”:
Ας δούμε την άλλη μέθοδο!
Μέθοδος 2: Αλλαγή χρώματος κειμένου Χρησιμοποιώντας την ιδιότητα style.color με τη μέθοδο querySelector()
Μπορείτε επίσης να αλλάξετε το χρώμα του κειμένου χρησιμοποιώντας το ' querySelector() ” μέθοδος με ιδιότητα στυλ.χρώμα. Έχει πρόσβαση στο στοιχείο τόσο με το id όσο και με την κλάση που έχει εκχωρηθεί, ενώ η μέθοδος getElementById() απλώς ανακτά το στοιχείο με το αναγνωριστικό που της έχει εκχωρηθεί.
Σύνταξη
Χρησιμοποιήστε την ακόλουθη σύνταξη για να αλλάξετε το χρώμα του κειμένου χρησιμοποιώντας την ιδιότητα χρώματος με τη βοήθεια της μεθόδου querySelector():
έγγραφο. querySelector ( 'id/classname' ) . στυλ . χρώμα = 'χρώμα' ;Παράδειγμα
Εδώ, θα χρησιμοποιήσουμε το ετικέτα για να προσθέσετε μια παράγραφο με κλάση με όνομα ' χρώμα ”, που θα βοηθήσει στην πρόσβαση στο στοιχείο
και ένα κουμπί που θα καλέσει το JavaScript άλλαξε χρώμα() ' μέθοδος όταν θα ενεργοποιηθεί το συμβάν onclick:
< Π τάξη = 'χρώμα' > Καλώς ήρθατε στο LinuxHint Π >< κουμπί κάνοντας κλικ = 'άλλαξε χρώμα()' > Κάντε κλικ για να δείτε τη μαγεία κουμπί >
Στον ορισμό του « άλλαξε χρώμα() ' μέθοδος, θα επικαλεστούμε το ' querySelector() ' μέθοδος μεταβιβάζοντας το όνομα της κλάσης με την τελεία(.) που υποδεικνύει ότι το στοιχείο έχει πρόσβαση με βάση το όνομα της κλάσης του και, στη συνέχεια, εφαρμόστε την ιδιότητα χρώματος σε αυτό:
λειτουργία αλλαγή χρώματος ( ) {έγγραφο. querySelector ( '.χρώμα' ) . στυλ . χρώμα = 'Πορφύρα βαφή' ;
}
Ωστόσο, για να χρησιμοποιήσετε ένα αναγνωριστικό σε ένα στοιχείο HTML και να αποκτήσετε πρόσβαση σε αυτό χρησιμοποιώντας τη μέθοδο querySelector(), προσθέστε το ' # 'υπογραφή με όνομα ταυτότητας:
έγγραφο. querySelector ( '#χρώμα' ) . στυλ . χρώμα = 'Πορφύρα βαφή' ;Παραγωγή
Συγκεντρώσαμε την απλούστερη προσέγγιση για την αλλαγή του χρώματος του κειμένου σε JavaScript.
συμπέρασμα
Για να αλλάξετε το χρώμα του κειμένου, μπορείτε να χρησιμοποιήσετε την ιδιότητα style.color με τη βοήθεια της μεθόδου getElementById() ή της μεθόδου querySelector(). Η μέθοδος getElementById() χρησιμοποιείται για πρόσβαση στο στοιχείο HTML με βάση το αναγνωριστικό που του έχει εκχωρηθεί, ενώ η μέθοδος querySelector() έχει πρόσβαση στο στοιχείο με βάση το αναγνωριστικό που έχει εκχωρηθεί ή την κλάση καθορίζοντας τα σύμβολα (#) ή (.), αντίστοιχα. Αυτή η μελέτη επεξηγεί την απλή διαδικασία για την αλλαγή του χρώματος του κειμένου σε JavaScript.