Το κείμενο είναι το πιο σημαντικό και πιο ορατό στοιχείο για κάθε εφαρμογή ή ιστοσελίδα, χωρίς τη χρήση κειμένου ο δημιουργός δεν μπορεί να μεταφέρει πλήρως τις σκέψεις του ή να παραδώσει σωστά τις πληροφορίες. Λόγω της ανάγκης και της σημασίας του, το στυλ του γίνεται επίσης εφιάλτης για τους περισσότερους προγραμματιστές. Για το στατικό κείμενο, οι ιδιότητες CSS και το πλαίσιο του βοηθούν πολύ, αλλά παρόλα αυτά, υπάρχει ανάγκη για μια ιδιότητα που μπορεί να εφαρμοστεί στο στυλ δυναμικά. Ευτυχώς, αυτή η ιδιότητα παρέχεται από JavaScript με το όνομα ' κείμενοΔιακόσμηση '.
Αυτό το ιστολόγιο θα παρέχει τη διαδικασία εφαρμογής στυλ πάνω από το στοιχείο HTML μέσω της ιδιότητας textDecoration.
Πώς να εφαρμόσετε στυλ χρησιμοποιώντας την ιδιότητα textDecoration Style HTML DOM;
Το στυλ DOM ' κείμενοΔιακόσμηση 'Η ιδιότητα ουσιαστικά εκτελεί στυλ όπως η προσθήκη' υπογράμμιση», «υπεργράμμιση», «μετά από γραμμή» και «αναβοσβήνει ' πάνω από ένα επιλεγμένο στοιχείο. Αυτή η ιδιότητα όταν έχει οριστεί σε ' κανένας Το ” καταργεί το προεπιλεγμένο στυλ που εφαρμόζεται σε αυτό το στοιχείο σαν ετικέτα αγκύρωσης.
Σύνταξη
Η σύνταξη για την ιδιότητα textDecoration στυλ DOM είναι:
eleObj. στυλ . κείμενοΔιακόσμηση = 'καμία|υπέργραμμη|αναβοσβήνει|υπογράμμιση|αρχική|γραμμή-μέσω|κληρονομιά'
Επισκεφτείτε τον παρακάτω πίνακα για να πάρετε μια γρήγορη ιδέα σχετικά με τις τιμές που μπορούν να εκχωρηθούν στο ' κείμενοΔιακόσμηση ” ιδιοκτησία:
| αξία | Εξήγηση |
|---|---|
| κανένας | Μετατρέψτε το κείμενο σε απλή μορφή αφαιρώντας όλα τα προκαθορισμένα στυλ. είναι η προεπιλογή. |
| υπεργραμμίστε | Εισάγει μια γραμμή πάνω ή πάνω από το επιλεγμένο κείμενο. |
| αναβοσβήνω | Κάνει το κείμενο να αναβοσβήνει, αλλά δεν υποστηρίζεται από όλα τα προγράμματα περιήγησης ιστού. |
| υπογραμμίζω | Τοποθετεί τη γραμμή κάτω ή στο κάτω μέρος του επιλεγμένου κειμένου. |
| αρχικός | Ορίστε την εφαρμοσμένη ιδιότητα στην προεπιλεγμένη τιμή της που δεν είναι καμία στην περίπτωσή μας. |
| γραμμή-μέσω | Τοποθετήστε τη γραμμή στο κέντρο του κειμένου, δηλαδή ανάμεσα στο κείμενο. |
| κληρονομείς | Κληρονομεί την ιδιότητα που εφαρμόζεται στη ρίζα ή στο γονικό στοιχείο. |
Τώρα, ας ρίξουμε μια ματιά στη διαδικασία υλοποίησης και την επίδρασή της στο κείμενο για κάθε τιμή του ' κείμενοΔιακόσμηση ” ιδιοκτησία.
Παράδειγμα 1: Ιδιότητα 'textDecoration = none'.
Η πρακτική εφαρμογή του « κείμενοΔιακόσμηση «Ακίνητο αξίας « κανένας » πρόκειται να εξηγηθεί στον παρακάτω κώδικα:
< σώμα >
< κέντρο >
< h1 στυλ = 'χρώμα: μπλε καντ;' > Linux < / h1 >
< κουμπί στο κλικ = 'Εφαρμοστής()' > Εφαρμοστής < / κουμπί >
< Π > Όταν η τιμή της ιδιότητας textDecoration έχει οριστεί σε κανένα: < / Π >
< h3 ταυτότητα = 'useCase' στυλ = 'κείμενο-διακόσμηση: overline;' > Στοχευμένο στοιχείο < / h3 >
< / κέντρο >
< γραφή >
συνάρτηση Applier() {
document.getElementById('useCase').style.textDecoration = 'κανένα';
}
< / γραφή >
< / σώμα >
Επεξήγηση του παραπάνω κωδικού:
- Πρώτα, χρησιμοποιήστε ένα «< κουμπί >' για να δημιουργήσετε ένα κουμπί και να του αναθέσετε έναν ακροατή συμβάντων του ' στο κλικ '. Αυτό το πρόγραμμα ακρόασης συμβάντων ενεργοποιεί μια συνάρτηση JavaScript με το όνομα ' Εφαρμοστής '.
- Στη συνέχεια, δημιουργήστε ένα στοχευμένο στοιχείο ' h3 ' και εκχωρήστε του ένα μοναδικό αναγνωριστικό του ' useCase '. Επίσης, εφαρμόστε το CSS ' κείμενο-διακόσμηση «Ακίνητο σε αυτό έχει αξία « υπεργραμμίστε ' με τη βοήθεια του ' στυλ ' Χαρακτηριστικό.
- Τώρα, εισάγετε το ' Εφαρμοστής ()' σώμα συνάρτησης και επιλέξτε το στοχευμένο στοιχείο μέσω του αναγνωριστικού του ' useCase 'και επισυνάψτε το στυλ' κείμενοΔιακόσμηση ” ιδιοκτησία.
- Μετά από αυτό, εκχωρήστε στην ιδιότητα τιμή ' κανένας ” για να αφαιρέσετε τυχόν προ-εφαρμοσμένο στυλ διακόσμησης κειμένου πάνω από το στοιχείο.
Η προβολή της ιστοσελίδας μετά την εκτέλεση του παραπάνω κώδικα:
Η έξοδος δείχνει ότι το προστυλ που εφαρμόζεται στο στοχευμένο στοιχείο αφαιρείται με την εκχώρηση τιμής ' κανένας '.
Παράδειγμα 2: Ιδιότητα 'textDecoration = αρχικό'.
Το παρακάτω απόσπασμα κώδικα απεικονίζει την υλοποίηση του ' κείμενοΔιακόσμηση « ακίνητο όταν η αξία του « αρχικός » του ανατίθεται:
< γραφή >λειτουργία Εφαρμοστής ( ) {
έγγραφο. getElementById ( 'useCase' ) . στυλ . κείμενοΔιακόσμηση = 'αρχικός' ;
}
γραφή >
Η έξοδος που δημιουργήθηκε μετά τη μεταγλώττιση του παραπάνω κώδικα φαίνεται παρακάτω:
Η παραπάνω έξοδος δείχνει ότι η τιμή της διακόσμησης κειμένου έχει οριστεί στην προεπιλεγμένη τιμή που είναι ' κανένας ” και ως εκ τούτου όλο το pre-styling έχει επανέλθει.
Παράδειγμα 3: Ιδιότητα «textDecoration = overline».
Ο παρακάτω κώδικας δείχνει την πρακτική εφαρμογή του « κείμενοΔιακόσμηση « ακίνητο όταν η αξία του « υπεργραμμίστε » του παρέχεται:
< σώμα >< κέντρο >
< h1 στυλ = 'χρώμα: μπλε καντ;' > Linux < / h1 >
< κουμπί στο κλικ = 'Εφαρμοστής()' > Εφαρμοστής < / κουμπί >
< Π > Όταν η τιμή της ιδιότητας textDecoration έχει οριστεί σε υπεργράμμιση: < / Π >
< h3 ταυτότητα = 'useCase' > Στοχευμένο στοιχείο < / h3 >
< / κέντρο >
< γραφή >
συνάρτηση Applier() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / γραφή >
< / σώμα >
Η επεξήγηση του παραπάνω κώδικα αναφέρεται παρακάτω:
- Πρώτον, το « κουμπί» και «h3 Το στοιχείο ” δημιουργείται με τον ίδιο τρόπο και η ιδιότητα CSS που εφαρμόζεται πάνω από το 'h3' το στοιχείο έχει πλέον αφαιρεθεί.
- Στη συνέχεια, μέσα στο « Εφαρμοστής Η συνάρτηση ' επιλέγεται το στοχευόμενο στοιχείο και το ' κείμενοΔιακόσμηση «Ακίνητο αξίας « υπεργραμμίστε ” αντιστοιχίζεται στο στοιχείο.
Η έξοδος μετά την εκτέλεση του παραπάνω κώδικα εμφανίζεται παρακάτω:
Η έξοδος δείχνει την επίδραση του ' κείμενοΔιακόσμηση = υπεργραμμή ιδιότητα πάνω από το κείμενο.
Παράδειγμα 4: Ιδιότητα «textDecoration = υπογράμμιση».
Η πρακτική εφαρμογή του κειμένου όταν η αξία του « υπογραμμίζω ' ανατίθεται στο ' κείμενοΔιακόσμηση ” Το ακίνητο αναφέρεται παρακάτω:
< γραφή >λειτουργία Εφαρμοστής ( ) {
έγγραφο. getElementById ( 'useCase' ) . στυλ . κείμενοΔιακόσμηση = 'υπογραμμίζω' ;
}
γραφή >
Μετά τη μεταγλώττιση, η έξοδος μοιάζει με αυτό:
Η έξοδος δείχνει ότι η γραμμή έχει προστεθεί στο κάτω μέρος του κειμένου.
Παράδειγμα 5: Ιδιότητα 'textDecoration = line-through'.
Οπτική υλοποίηση του « κείμενοΔιακόσμηση «ακίνητο αξίας « γραμμή-μέσω » φαίνεται παρακάτω:
< γραφή >λειτουργία Εφαρμοστής ( ) {
έγγραφο. getElementById ( 'useCase' ) . στυλ . κείμενοΔιακόσμηση = 'line-through' ;
}
γραφή >
Η έξοδος που δημιουργείται για τον παραπάνω κώδικα εμφανίζεται παρακάτω:
Η έξοδος δείχνει το αποτέλεσμα που γίνεται από το ' γραμμή-μέσω ' πάνω από το κείμενο στοχευμένου στοιχείου.
συμπέρασμα
Το στυλ HTML DOM ' κείμενοΔιακόσμηση Η ιδιότητα ” ασχολείται συγκεκριμένα με το στυλ των στοιχείων HTML μέσω JavaScript για την εκτέλεση δυναμικού στυλ σε στοιχεία κειμένου. Πολλαπλές τιμές μπορούν να αντιστοιχιστούν σε αυτό το ' κείμενοΔιακόσμηση ” για να εκτελέσετε διαφορετικές παραλλαγές στυλ. Αυτές οι αξίες είναι ' κανένας», «υπεργράμμιση», «υπογράμμιση», «γραμμή-μέσω», «αρχική», «αναβοσβήνει» και «κληρονομιά» '. Αυτό το ιστολόγιο έχει εξηγήσει με επιτυχία τη διαδικασία με την οποία ο προγραμματιστής μπορεί να εφαρμόσει στυλ χρησιμοποιώντας την ιδιότητα textDecoration.