Imposta l'immagine di sfondo di un div tramite funzione in javascript

Nel processo di distinguere i siti Web attraenti e reattivi, è necessario aggiungere immagini al modello di oggetti documenti (DOM) al momento dell'attivazione delle funzionalità. Questo alla fine porta a far rimanere l'utente sul sito ed esploralo, il che si traduce in un aumento del traffico a favore dello sviluppatore. In tali scenari di caso, l'impostazione dell'immagine di sfondo di un div tramite le funzioni JavaScript si chiede nel fornire funzionalità aggiuntive.

Questo articolo spiegherà gli approcci per impostare l'immagine di sfondo di un div tramite una funzione in JavaScript.

Come impostare l'immagine di sfondo di un div attraverso la funzione in javascript?

L'immagine di sfondo di un div tramite una funzione in JavaScript può essere impostata utilizzando i seguenti approcci:

• "stile.immagine di sfondo" proprietà.
• "setAttribute ()" metodo.

Approccio 1: imposta l'immagine di sfondo di un div con l'aiuto di una funzione in JavaScript usando lo stile.Proprietà di background

IL "immagine di sfondo"La proprietà restituisce l'immagine di sfondo dell'elemento. Questa proprietà può essere utilizzata per recuperare il "div"Elemento con l'aiuto di una funzione definita dall'utente e applica un'immagine di sfondo.

Sintassi

oggetto.stile.backgroundimage = "url ('url') | back | iniziale | eredità"

Nella sintassi data:

• "URL"Si riferisce alla posizione del file di immagine.
• "Indietro"Indica l'immagine di sfondo.
• "iniziale"Si riferisce al valore predefinito della proprietà.
• "ereditare"Indica l'eredità della proprietà dal suo elemento genitore.

Esempio
Seguiamo l'esempio di seguito:

Questo è il sito web Linuxhint

Clicca per vedere l'effetto

Nel frammento di codice sopra, eseguire i seguenti passaggi:

• Includere il "div"Elemento con il specificato"id"E le dimensioni regolate.
• Successivamente, includi l'intestazione dichiarata.
• Inoltre, crea un pulsante con un allegato "al clic"Reindirizzamento dell'evento alla funzione DivBackground ().

Passiamo alla parte JavaScript del codice:

Nel frammento di codice sopra:

• Dichiarare una funzione denominata "DivBackground ()".
• Nella sua definizione, accedi all'incluso "div"Elemento per il suo"id" usando il "documento.getElementById ()" metodo.
• Infine, applica il “stile.immagine di sfondo"Proprietà con la posizione dell'immagine specificata come"URL".
• Ciò comporterà l'impostazione dell'immagine di sfondo sull'intestazione e il pulsante inclusi nel "div".

Produzione

Nell'output sopra, è evidente che l'immagine di sfondo viene applicata al contenuto "intestazione" E "pulsante"All'interno del"div".

Approccio 2: impostare l'immagine di sfondo di un div tramite funzione in javascript usando il metodo setAttribute ()

IL "setAttribute ()"Il metodo imposta un nuovo valore su un attributo. Questo metodo può essere applicato per impostare l'attributo come "immagine di sfondo"Alla tabella contenuta nel"div"Elemento.

Sintassi

elemento.setAttribute (nome, valore)

Nella sintassi sopra:

• "nome"Si riferisce al nome dell'attributo.
• "valore"Indica il valore dell'attributo.

Esempio
Diamo un'occhiata alle seguenti righe di codice:

Sr.NO	Nome	Città
1	David	Los Angeles

Clicca per vedere l'effetto

Nel frammento di codice sopra:

• Includere il "div"Elemento con il specificato"id".
• Inoltre, contenere il dichiarato "tavolo"All'interno del"div"Con i valori specificati di"tavolo da tavolo" E "Data da tavolo".
• Nel passaggio successivo, crea un pulsante con un allegato "al clic"Evento che invoca la funzione backgroundimage ().

Continuiamo alla parte JavaScript del codice:

Nel frammento di codice sopra, eseguire i seguenti passaggi:

• Dichiarare una funzione denominata "immagine di sfondo()".
• Nella sua definizione, accedi al "div"Elemento per il suo"id" usando il "documento.getElementById ()" metodo.
• Dopodiché, applica il "setAttribute ()"Metodo con il percorso dell'immagine specificato come discusso e il"stile"Attributo come parametro.

Produzione

Dall'output sopra, si può osservare che l'immagine di sfondo viene aggiunta alla tabella al clic del pulsante.

Conclusione

IL "stile.immagine di sfondo"Proprietà o"setAttribute ()"Il metodo può essere utilizzato per impostare l'immagine di sfondo di un div tramite funzione in javascript. Il primo approccio può essere implementato per recuperare il "div"Elemento con l'aiuto di una funzione definita dall'utente e applica un'immagine di sfondo. Quest'ultimo metodo può essere utilizzato per impostare l'immagine di sfondo della tabella inclusa impostando i suoi attributi (immagine). Questo tutorial spiega come impostare l'immagine di sfondo di un div con l'aiuto di una funzione usando JavaScript.