Αυτό το άρθρο παρουσιάζει τη διαδικασία βήμα προς βήμα για τη μετατροπή κεφαλαίων κειμένων σε πεζά γράμματα τίτλου.
Πώς να μετατρέψετε το κεφαλαίο κείμενο σε πεζό τίτλο;
Με τη βοήθεια των ιδιοτήτων CSS και της JavaScript, το κεφαλαίο κείμενο μπορεί να μετατραπεί σε κεφαλαία κεφαλαία. Αυτή η μετατροπή βοηθά στη βελτίωση της αναγνωσιμότητας και της εμφάνισης του κειμένου. Επίσης, παρέχει συνεπή μορφοποίηση και βελτιώνει την εμπειρία του χρήστη.
Ακολουθήστε τον παρακάτω βήμα προς βήμα οδηγό για τη μετατροπή από κεφαλαία σε κεφαλαία:
Βήμα 1: Δημιουργήστε ένα στοχευμένο στοιχείο
Σε αυτό το πρώτο βήμα, δημιουργήστε ένα στοχευμένο/επιλεγμένο στοιχείο μέσα στο ' <σώμα> ετικέτα που μετατρέπεται σε περίπτωση τίτλου. Για παράδειγμα, το « Π Τα δεδομένα των στοιχείων στοχεύουν:
< κέντρο >
< Π ταυτότητα = 'μετατροπέας' > ΑΥΤΟ ΤΟ ΚΕΙΜΕΝΟ ΜΕΤΑΤΡΕΠΕΤΑΙ ΑΠΟ ΚΕΦΑΛΑΙΑ ΣΕ ΠΕΡΙΠΤΩΣΗ ΤΙΤΛΟΥ ΧΡΗΣΙΜΟΠΟΙΩΝΤΑΣ CSS < / Π >
< κέντρο >
Στο παραπάνω μπλοκ κώδικα:
- Πρώτα, χρησιμοποιήστε ένα ' ετικέτα ” για εμφάνιση κειμένου στο κέντρο της ιστοσελίδας μέσα στο “ <κέντρο> ' ετικέτα. Επίσης, παρέχετε εικονικά δεδομένα σε μορφή κεφαλαίων.
- Στη συνέχεια, προσθέστε ένα ' ταυτότητα ' χαρακτηριστικό και δώστε του μια τιμή ' μετατροπέας '. Αυτό ' ταυτότητα ' πρόκειται να χρησιμοποιηθεί για την αποθήκευση της αναφοράς της ετικέτας
μέσα στην ετικέτα JavaScript.
Μετά το τέλος της φάσης σύνταξης:
Το παραπάνω στιγμιότυπο της ιστοσελίδας δείχνει ότι το κείμενο εμφανίστηκε με επιτυχία.
Βήμα 2: Μετατροπή κεφαλαίων σε πεζά γράμματα τίτλου
Για τη δημιουργία ενός μετατροπέα, χρησιμοποιούνται οι ιδιότητες και οι μέθοδοι JavaScript. Ακολουθήστε τον παρακάτω κώδικα, η περιγραφή του αναφέρεται παρακάτω:
ήταν στόχος = document.getElementById ( 'μετατροπέας' ) .textContent.toLowerCase ( ) ;
στόχος = στόχος .αντικαθιστώ ( / \b\w / σολ,
λειτουργία ( πιο χαμηλα ) { επιστροφή χαμηλότερα.toUpperCase ( ) ; } ) ;
document.getElementById ( 'μετατροπέας' ) .textΠεριεχόμενο = στόχος ;
< / γραφή >
Στο παραπάνω απόσπασμα κώδικα:
- Πρώτα, δημιουργήστε μια μεταβλητή με το όνομα ' στόχος ' μεσα στην ' <σενάριο> ετικέτα '.
- Στη συνέχεια, χρησιμοποιήστε το ' περιεχόμενο κειμένου ιδιότητα για την επιλογή μόνο κειμένου αφήνοντας χώρο και άλλες ετικέτες. Ο ' toLowerCase() Η συνάρτηση έχει ένα αναγνωριστικό «μετατροπέα» που αποθηκεύει μια τιμή στη μεταβλητή «στόχος».
- Μετά το ' αντικαθιστώ() Η μέθοδος χρησιμοποιείται για την αλλαγή της τιμής της μεταβλητής «στόχος». Επιλέγει τον πρώτο χαρακτήρα κάθε λέξης χρησιμοποιώντας το « \b\w ' έκφραση και στη συνέχεια χρησιμοποιεί το ' toUpperCase() ' λειτουργία. Αλλάζει τη μορφή κειμένου σε κεφαλαία.
- Στο τέλος, η νέα τιμή της μεταβλητής «στόχος» εμφανίζεται στην οθόνη με αναγνωριστικό « μετατροπέας '.
Μετά την εκτέλεση του αποσπάσματος κώδικα:
Η έξοδος δείχνει ότι το κεφαλαίο κείμενο έχει μετατραπεί σε μορφή πεζών-κεφαλαίων τίτλου.
συμπέρασμα
Για να μετατρέψετε κεφαλαία σε κεφαλαία κεφαλαία, χρησιμοποιήστε το ' toLowerCase() ' λειτουργία στο επιλεγμένο στοιχείο. Μετά από αυτό, χρησιμοποιήστε το ' αντικαθιστώ() ' λειτουργία για να επιλέξετε τον πρώτο χαρακτήρα κάθε λέξης χρησιμοποιώντας το ' \b\w » έκφραση. Στο τέλος, ο επιλεγμένος χαρακτήρας μετατρέπεται σε κεφαλαία χρησιμοποιώντας το « toUpperCase() ' λειτουργία. Αυτό το άρθρο έχει δείξει τη διαδικασία μετατροπής του κεφαλαίου κειμένου των επιλεγμένων στοιχείων σε πεζά γράμματα τίτλου.