Αυτή η ανάρτηση καταγράφει τη λειτουργία και τη χρήση της ιδιότητας 'backgroundImage' του στυλ HTML DOM.
Πώς να χρησιμοποιήσετε την ιδιότητα 'backgroundImage' του στυλ HTML DOM σε JavaScript;
Το στυλ HTML DOM ' εικόνα φόντου Η ιδιότητα ” χρησιμοποιείται για την προσαρμογή του στοιχείου HTML και του εγγράφου προσαρτώντας μια εικόνα φόντου με αναφορά στη διαδρομή του.
Σύνταξη (Ρύθμιση της ιδιότητας 'backgroundImage')
αντικείμενο. στυλ . εικόνα φόντου = 'url('URL')|καμία|αρχική|κληρονομιά'Η παραπάνω σύνταξη υποστηρίζει τις ακόλουθες τιμές ιδιοτήτων 'backgroundImage':
- url ('URL'): Καθορίζει τη θέση της επιθυμητής εικόνας φόντου.
- κανένας: Αντιπροσωπεύει την προεπιλεγμένη τιμή, δηλαδή καμία εικόνα φόντου.
- αρχικός: Είναι παρόμοια με την προεπιλεγμένη τιμή του προγράμματος περιήγησης.
- κληρονομώ: Κληρονομεί την ιδιότητα από το μητρικό στοιχείο.
Σύνταξη (URL επιστροφής της ιδιότητας 'backgroundImage')
αντικείμενο. στυλ . εικόνα φόντουΑυτή η σύνταξη επιστρέφει την τιμή συμβολοσειράς που περιέχει τη διεύθυνση URL της προστιθέμενης εικόνας φόντου.
Ας χρησιμοποιήσουμε τις συντακτικές που ορίζονται παραπάνω πρακτικά για να εξηγήσουμε τη χρήση της ιδιότητας στυλ 'backgroundImage'.
Παράδειγμα 1: Εφαρμόστε την ιδιότητα 'backgroundImage' Style για να ορίσετε την εικόνα φόντου
Αυτό το παράδειγμα εφαρμόζει το στυλ ' εικόνα φόντου ιδιότητα για να ορίσετε την επιθυμητή εικόνα φόντου στο έγγραφο, προσδιορίζοντας τη διεύθυνση URL του.
Κώδικας HTML
Αρχικά, ρίξτε μια ματιά στον αναφερόμενο κώδικα HTML:
< h2 > Χρήση HTML DOM Στυλ Ιδιότητα backgroundImage σε JavaScript h2 >
< κουμπί κάνοντας κλικ = 'myFunc()' > Κάντε κλικ ΕΔΩ κουμπί >
Σε αυτόν τον κώδικα:
- Ο ' Η ετικέτα προσθέτει την υπότιτλου του επιπέδου 2.
- Ο ' <κουμπί> 'Η ετικέτα δημιουργεί ένα κουμπί που έχει επισυνάπτεται ' στο κλικ 'συμβάν για την εκτέλεση της συνάρτησης' myFunc() 'Κάντε κλικ στο κουμπί.
Κώδικας JavaScript
Στη συνέχεια, ακολουθήστε τον κώδικα JavaScript που δίνεται:
< γραφή >λειτουργία myFunc ( ) {
έγγραφο. σώμα . στυλ . εικόνα φόντου = 'url('./html&css/image.jpg')' ;
}
γραφή >
Στο παραπάνω απόσπασμα κώδικα:
- Η συνάρτηση με το όνομα ' myFunc() ' ορίζεται.
- Στον ορισμό του, το « style.backgroundΕικόνα 'η ιδιότητα εφαρμόζει την καθορισμένη' URL » εικόνα στο φόντο ολόκληρου του εγγράφου.
Παραγωγή
Η έξοδος δείχνει ότι η εικόνα φόντου προστίθεται σε ολόκληρο το έγγραφο με το πάτημα του κουμπιού.
Παράδειγμα 2: Εφαρμογή ιδιότητας στυλ 'backgroundImage' για επιστροφή της διεύθυνσης URL της εικόνας φόντου
Ο ' εικόνα φόντου Η ιδιότητα ” είναι επίσης επωφελής για την επιστροφή της διεύθυνσης URL της εικόνας φόντου. Ας το δούμε πρακτικά.
Κώδικας HTML
Πρώτα, διαβάστε τον γραπτό κώδικα HTML:
< h2 > Χρήση HTML DOM Στυλ Ιδιότητα backgroundImage σε JavaScript h2 >< div id = 'myDiv' στυλ = 'Ύψος: 500 εικονοστοιχεία, πλάτος: 500 εικονοστοιχεία;
περίγραμμα: 3 εικονοστοιχεία συμπαγές μαύρο;background-image:url('./html&css/image.jpg')' > Αυτό είναι div div >
< h4 id = 'διαδήλωση' h4 >
Στο παραπάνω μπλοκ κώδικα:
- Ο ' εικόνα φόντου Η ιδιότητα ' χρησιμοποιείται στο στοιχείο '' που προσθέτει μια εικόνα φόντου που αντιστοιχεί στη δεδομένη διεύθυνση URL.
- Ο ' Το στοιχείο ” δημιουργεί μια κενή υποεπικεφαλίδα του επιπέδου 4 που εμφανίζει την επιστρεφόμενη τιμή (URL) της προστιθέμενης εικόνας φόντου.
Κώδικας JavaScript
Τώρα, προχωρήστε στον κώδικα JavaScript:
< γραφή >
ας img = έγγραφο. getElementById ( 'myDiv' ) . στυλ . εικόνα φόντου ;
έγγραφο. getElementById ( 'διαδήλωση' ) . innerHTML = img ;
γραφή >Σε αυτό το μπλοκ κώδικα:
- Δηλώστε τη μεταβλητή ' img ' που χρησιμοποιεί το ' document.getElementById() ' μέθοδος για πρόσβαση στο στοιχείο '' μέσω του αναγνωριστικού του 'myDiv' και εφαρμόζει μια εικόνα φόντου μέσω του ' εικόνα φόντου ” ιδιοκτησία.
- Στη συνέχεια, η μέθοδος 'document.getElementById()' ανακτά την κενή υποκεφαλίδα χρησιμοποιώντας το αναγνωριστικό της 'demo' για να εμφανίσει τη διεύθυνση URL της προσαρτημένης εικόνας φόντου.
Παραγωγή
Η έξοδος εμφανίζει τη διεύθυνση URL της εικόνας φόντου που εφαρμόζεται στο στοιχείο 'div'.
συμπέρασμα
Η JavaScript χρησιμοποιεί το στυλ ' εικόνα φόντου ” ιδιότητα για την αντιστοίχιση της εικόνας φόντου στο επιθυμητό στοιχείο HTML ή την επιστροφή της διεύθυνσης URL του. Υποστηρίζει τέσσερις τιμές ιδιοτήτων για να ορίσετε την εικόνα φόντου, συμπεριλαμβανομένων των 'αρχική', 'κληρονομιά', 'URL' και 'καμία'. Ωστόσο, δεν υποστηρίζει καμία τιμή για τη λήψη της διεύθυνσης URL της εικόνας φόντου. Αυτή η ανάρτηση παρείχε μια σύντομη περιγραφή για τη χρήση της ιδιότητας 'backgroundImage' σε στυλ HTML DOM σε JavaScript.