Questo post illustra il funzionamento e l'utilizzo della proprietà 'backgroundImage' dello stile HTML DOM.
Come utilizzare la proprietà 'backgroundImage' in stile DOM HTML in JavaScript?
Lo stile HTML DOM ' immagine di sfondo La proprietà ” viene utilizzata per personalizzare l'elemento HTML e il documento aggiungendo un'immagine di sfondo facendo riferimento al suo percorso.
Sintassi (impostazione della proprietà 'backgroundImage')
oggetto. stile . immagine di sfondo = 'url('URL')|none|initial|eredita'La sintassi precedente supporta i seguenti valori della proprietà 'backgroundImage':
- url('URL'): Specifica la posizione dell'immagine di sfondo desiderata.
- nessuno: Rappresenta il valore predefinito, ovvero nessuna immagine di sfondo.
- iniziale: È simile al valore predefinito del browser.
- ereditare: Eredita la proprietà dal suo elemento padre.
Sintassi (URL di ritorno della proprietà 'backgroundImage')
oggetto. stile . immagine di sfondoQuesta sintassi restituisce il valore stringa contenente l'URL dell'immagine di sfondo aggiunta.
Usiamo praticamente le sintassi sopra definite per spiegare l'uso della proprietà style “backgroundImage”.
Esempio 1: applicare la proprietà Style 'backgroundImage' per impostare l'immagine di sfondo
Questo esempio applica lo stile ' immagine di sfondo ” per impostare l'immagine di sfondo desiderata per il documento specificandone l'URL.
Codice HTML
Innanzitutto, dai un'occhiata al codice HTML dichiarato:
< h2 > Utilizzo HTML DOM Stile proprietà backgroundImage in JavaScript h2 >
< pulsante al clic = 'miaFunzione()' > Clicca qui pulsante >
In questo codice:
- IL ' Il tag ” aggiunge il sottotitolo del livello 2.
- IL '
” tag crea un pulsante con un allegato “ al clic ” evento per eseguire la funzione “ miaFunc() ” al clic del pulsante.
codice javascript
Successivamente, segui il codice JavaScript fornito:
< copione >funzione myFunc ( ) {
documento. corpo . stile . immagine di sfondo = 'url('./html&css/image.jpg')' ;
}
copione >
Nello snippet di codice sopra:
- La funzione denominata “ miaFunc() ' è definito.
- Nella sua definizione, il “ style.backgroundImmagine ” proprietà applica la specifica “ URL ” sullo sfondo dell'intero documento.
Produzione
L'output mostra che l'immagine di sfondo viene aggiunta all'intero documento al clic del pulsante.
Esempio 2: applica la proprietà 'backgroundImage' dello stile per restituire l'URL dell'immagine di sfondo
IL ' immagine di sfondo ” è utile anche per restituire l'URL dell'immagine di sfondo. Vediamolo praticamente.
Codice HTML
Innanzitutto, passa attraverso il codice HTML scritto:
< h2 > Utilizzo HTML DOM Stile proprietà backgroundImage in JavaScript h2 >< ID div = 'mioDiv' stile = 'altezza: 500px; larghezza: 500px;
bordo: 3px nero pieno;background-image:url('./html&css/image.jpg')' > Questo è un div div >
< h4 id = 'demo' > h4 >
Nel blocco di codice sopra:
- IL ' immagine di sfondo La proprietà ” viene utilizzata nell'elemento “” che aggiunge un'immagine di sfondo corrispondente all'URL specificato.
- IL ' L'elemento ” crea un sottotitolo vuoto di livello 4 che visualizza il valore restituito (URL) dell'immagine di sfondo aggiunta.
codice javascript
Ora, procedi al codice JavaScript:
< copione >
lascia che img = documento. getElementById ( 'mioDiv' ) . stile . immagine di sfondo ;
documento. getElementById ( 'demo' ) . innerHTML = imm ;
copione >In questo blocco di codice:
- Dichiara la variabile ' imm ” che usa il “ documento.getElementById() ” per accedere all'elemento “” tramite il suo id “myDiv” e applica un'immagine di sfondo tramite il metodo “ immagine di sfondo ' proprietà.
- Successivamente, il metodo 'document.getElementById()' recupera il sottotitolo vuoto utilizzando il suo id 'demo' per visualizzare l'URL dell'immagine di sfondo aggiunta.
Produzione
L'output mostra l'URL dell'immagine di sfondo applicata all'elemento 'div'.
Conclusione
JavaScript usa lo stile ' immagine di sfondo ” per assegnare l'immagine di sfondo all'elemento HTML desiderato o restituirne l'URL. Supporta quattro valori di proprietà per impostare l'immagine di sfondo, inclusi 'initial', 'inherit', 'URL' e 'none'. Tuttavia, non supporta alcun valore per ottenere l'URL dell'immagine di sfondo. Questo post ha fornito una breve descrizione per utilizzare la proprietà 'backgroundImage' in stile HTML DOM in JavaScript.