Αυτός ο οδηγός αναλύει τον στόχο και τη λειτουργία της ιδιότητας «στυλ» του στοιχείου HTML DOM σε JavaScript.
Πώς λειτουργεί η ιδιότητα «στυλ» του στοιχείου HTML DOM σε JavaScript;
Το HTML DOM ' στυλ ” είναι μια ιδιότητα μόνο για ανάγνωση που λειτουργεί με βάση τις εκχωρημένες ιδιότητες στυλ ανάλογα. Επίσης, επιστρέφει το ' Δήλωση στυλ CSSS ” αντικείμενο που περιέχει όλα τα ενσωματωμένα χαρακτηριστικά στυλ του συγκεκριμένου στοιχείου HTML.
Σημείωση: Το αντικείμενο 'CSSStyleDeclaration' περιέχει τα χαρακτηριστικά στυλ CSS που ορίζονται στην ενότητα head.
Σύνταξη (Ορισμός ιδιότητας στυλ)
στοιχείο. στυλ . ιδιοκτησία = αξίαΣύμφωνα με την παραπάνω σύνταξη, το « στυλ 'Η ιδιότητα υποστηρίζει μόνο μία παράμετρο' αξία ' που αντιπροσωπεύει την τιμή της καθορισμένης ιδιότητας στυλ.
Σύνταξη (Επιστροφή ιδιότητας στυλ)
στοιχείο. στυλ . ιδιοκτησίαΑς εφαρμόσουμε πρακτικά τις προαναφερθείσες συντακτικές της ιδιότητας 'style'.
Παράδειγμα 1: Χρησιμοποιήστε την ιδιότητα 'style' για να ορίσετε το χρώμα ενός συγκεκριμένου στοιχείου HTML
Αυτό το παράδειγμα εφαρμόζει τη βασική σύνταξη του ' στυλ ' για να ορίσετε την τιμή της ιδιότητας 'style' έτσι ώστε το χρώμα του συγκεκριμένου στοιχείου HTML να αλλάξει.
Κώδικας HTML
Πρώτα, περάστε από τον δεδομένο κώδικα HTML:
< h2 > Χρησιμοποιήστε την Ιδιότητα στυλ σε JavaScript h2 >
< h3 id = 'H3' > Δεύτερη διάκριση. h3 >
Στις παραπάνω γραμμές κώδικα:
- Ο ' ” Η ετικέτα HTML καθορίζει την πρώτη υποκεφαλίδα.
- Ο ' Η ετικέτα ' δημιουργεί τη δεύτερη υπότιτλου του επιπέδου 3 με εκχωρημένο αναγνωριστικό 'H3'.
Κώδικας JavaScript
Στη συνέχεια, ακολουθήστε τον αναφερόμενο κώδικα JavaScript:
< γραφή >έγγραφο. getElementById ( 'H3' ) . στυλ . χρώμα = 'πράσινος' ;
γραφή >
Στο παραπάνω απόσπασμα κώδικα, το ' document.getElementById() 'Η μέθοδος έχει πρόσβαση στο συμπεριλαμβανόμενο' 'στοιχείο μέσω του αναγνωριστικού του' H3 ' για να ορίσετε το καθορισμένο ' χρώμα ' τιμή χαρακτηριστικού του στοιχείου μέσω του ' στυλ.χρώμα ” ιδιοκτησία.
Παραγωγή
Η έξοδος δείχνει ότι η στοχευμένη οπτική αναπαράσταση του στοιχείου HTML έχει ρυθμιστεί ανάλογα χρησιμοποιώντας την ιδιότητα 'style'.
Παράδειγμα 2: Χρησιμοποιήστε την ιδιότητα 'style' για να λάβετε την τιμή του εφαρμοζόμενου χαρακτηριστικού 'style'
Σε αυτό το παράδειγμα, η ιδιότητα 'style' βοηθά στην εύρεση του εκχωρημένου χαρακτηριστικού 'style' του στοιχείου HTML χρησιμοποιώντας τη γενικευμένη σύνταξή του (Επιστροφή ιδιότητας στυλ).
Κώδικας HTML
Ο κώδικας HTML αναφέρεται εδώ:
< h2 > Χρησιμοποιήστε την Ιδιότητα στυλ σε JavaScript h2 >< h3 id = 'H3' στυλ = 'χρώμα φόντου:πορτοκαλί;' > Η τιμή του χρώματος φόντου της δεύτερης διάκρισης είναι : h3 >
< h4 id = 'διαδήλωση' h4 >
Σε αυτόν τον κώδικα:
- Ο ' Η ετικέτα HTML χρησιμοποιεί το χαρακτηριστικό 'style' που ορίζει το χρώμα φόντου του στοιχείου HTML '
'.
- Ο ' Η ετικέτα ' δημιουργεί μια κενή υποεπικεφαλίδα του επιπέδου 4 με ένα αναγνωριστικό ' διαδήλωση '.
Κώδικας JavaScript
Τώρα, δείτε τον δεδομένο κώδικα JavaScript:
< γραφή >συνθ αξία = έγγραφο. getElementById ( 'H3' ) . στυλ . χρώμα του φόντου ;
έγγραφο. getElementById ( 'διαδήλωση' ) . innerHTML = αξία ;
γραφή >
Στον παραπάνω γραμμένο κώδικα:
- Η μεταβλητή ' αξία ' δηλώνεται με ' συνθ ' λέξη-κλειδί που εφαρμόζει το ' document.getElementById() ' μέθοδος ανάκτησης του στοιχείου '
' χρησιμοποιώντας το αναγνωριστικό του για τη λήψη της τιμής του εφαρμοζόμενου χαρακτηριστικού 'style' και την εφαρμογή του στο στοιχείο, π.χ., '
' μέσω της ιδιότητας 'style'.
- Η μέθοδος 'document.getElementById()' χρησιμοποιείται ξανά για την πρόσβαση στο προστιθέμενο κενό στοιχείο '
' και την εμφάνιση της τιμής του εκχωρημένου χαρακτηριστικού 'style' έναντι του στοιχείου HTML που ανακτήθηκε και την προσάρτησή του ως υποκεφαλίδα μέσω του ' innerHTML ” ιδιοκτησία.
Παραγωγή
Η έξοδος εφαρμόζει το χρώμα φόντου στο στοιχείο και η τιμή του συνόλου χαρακτηριστικού 'style' επιστρέφεται επίσης ανάλογα.
συμπέρασμα
Η JavaScript χρησιμοποιεί το ' στυλ ιδιότητα για να εκχωρήσετε και να επιστρέψετε τις ενσωματωμένες ιδιότητες 'style' του στοιχείου HTML DOM. Απαιτείται μια πρόσθετη «τιμή» για να εφαρμοστεί ανάλογα η επιθυμητή λειτουργικότητα. Εκτός από τη ρύθμιση και την ανάκτηση, είναι επίσης ωφέλιμο να αλλάξετε το υπάρχον χαρακτηριστικό 'style'. Αυτός ο οδηγός παρουσίασε τον κύριο στόχο, την εργασία και την πρακτική εφαρμογή της Ιδιότητας στυλ στοιχείου HTML DOM.