Come cambiare l'immagine di sfondo in JavaScript

In JavaScript ci sono pagine Web che necessitano di un layout attraente, come sfondi scuri che di solito funzionano meglio per le interfacce. Allo stesso modo, gli sfondi bianchi consentono ai lettori di concentrarsi sul contenuto, e quindi i portali o i blog di notizie usano uno sfondo relativamente leggero con il testo scuro. In tali casi, JavaScript diventa molto utile nella formattazione e nel miglioramento della progettazione dei documenti.

Questo articolo discuterà i metodi per modificare l'immagine di fondo in JavaScript.

Come cambiare l'immagine di sfondo in JavaScript?

Per modificare l'immagine di sfondo in JavaScript, è possibile utilizzare i seguenti approcci:

• "immagine di sfondo"Proprietà su"Dom".
• "getElementById ()Metodo e "immagine di sfondo"Proprietà su"paragrafo".

Passare attraverso i metodi discussi uno per uno!

Metodo 1: Modifica l'immagine di sfondo in JavaScript usando la proprietà BackgroundMage su DOM.

IL "immagine di sfondo"La proprietà regola l'immagine di sfondo dell'elemento specificato. Questa tecnica può essere applicata applicando la proprietà di base e specificando l'immagine di sfondo individuando il suo percorso come argomento.

Sintassi

Nella sintassi sopra, "URL"Si riferisce al percorso dell'immagine.

Guarda il seguente esempio per la dimostrazione.

Esempio

In questo esempio, un pulsante verrà incluso con il valore specificato e un "al clic"Reindirizzamento dell'evento a a
Funzione denominata sterroMAGE ():

Ora, una funzione "immagine di sfondo()"Sarà dichiarato e il"documento.corpo.stile.immagine di sfondo"La proprietà accederà all'immagine di sfondo usando il percorso dell'immagine specificato nel suo argomento:

L'output dell'implementazione di cui sopra risulterà come segue:

Metodo 2: Modifica l'immagine in background in JavaScript usando il metodo GetElementById () e la proprietà di Image al paragrafo

IL "getElementById ()"Il metodo restituisce un elemento con un valore specificato e il"immagine di sfondo"La proprietà, come indicato sopra, restituisce l'immagine di sfondo del particolare elemento specificato nel suo argomento. Questo metodo può essere applicato per mappare il colore specificato sullo sfondo del paragrafo particolare.

Sintassi

Qui, "Elementid"Si riferisce all'ID di un elemento.

Passare attraverso il seguente esempio per una migliore comprensione del concetto dichiarato.

Esempio

Innanzitutto, includi un paragrafo nel

tagga e assegnalo un ID specifico:

Successivamente, crea un pulsante con un evento OnClick che accede alla funzione BackgroundMage (come discusso nel metodo precedente:

Infine, dichiara la funzione chiamata "immagine di sfondo()"Allo stesso modo. Qui, accedi all'ID definito usando "getElementById ()"Metodo e applicare l'immagine di sfondo specificata su di essa. Ciò comporterà l'implementazione del colore sullo sfondo del paragrafo:

Produzione

Abbiamo compilato il metodo più semplice per cambiare l'immagine di sfondo in JavaScript

Conclusione

Per modificare l'immagine in background in JavaScript, applica il "immagine di sfondo"Proprietà su"Dom"Per applicare l'immagine di sfondo specificata sull'intera pagina Web utilizzando una funzione o ottenendo l'ID particolare usando"getElementById ()"Metodo e applicazione"immagine di sfondo"Proprietà sulla specifica"paragrafo". Questo blog illustra i metodi per cambiare le immagini di sfondo in JavaScript.