In JavaScript, ci sono pagine web che richiedono un layout accattivante, come sfondi scuri che di solito funzionano meglio per le interfacce. Allo stesso modo, gli sfondi bianchi consentono ai lettori di concentrarsi sui contenuti, quindi i portali di notizie o i blog utilizzano uno sfondo relativamente chiaro con testo scuro. In questi casi, JavaScript diventa molto utile nella formattazione e nel miglioramento della progettazione dei documenti.
Questo articolo discuterà i metodi per modificare l'immagine di sfondo in JavaScript.
Come modificare 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 ”.
Passa attraverso i metodi discussi uno per uno!
Metodo 1: modifica dell'immagine di sfondo in JavaScript utilizzando la proprietà backgroundImage su DOM.
Il ' immagine di sfondo ” regola l'immagine di sfondo dell'elemento specificato. Questa tecnica può essere applicata applicando la proprietà backgroundImage e specificando l'immagine di sfondo individuandone il 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, verrà incluso un pulsante con il valore specificato e un ' al clic ” reindirizzamento dell'evento ad a
funzione denominata backgroundImage():
Ora, una funzione ' immagine di sfondo() ” sarà dichiarato e il “ document.body.style.backgroundImage ” accederà all'immagine di sfondo utilizzando il percorso dell'immagine specificato nel suo argomento:
L'output della suddetta implementazione risulterà come segue:
Metodo 2: modifica dell'immagine di sfondo in JavaScript utilizzando il metodo getElementById() e la proprietà backgroundImage nel 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 di un particolare paragrafo.
Sintassi
Qui, ' elementi ” si riferisce all'id di un elemento.
Passa attraverso il seguente esempio per una migliore comprensione del concetto affermato.
Esempio
Innanzitutto, includi un paragrafo nel tag
e assegnagli un ID specifico:
Quindi, crea un pulsante con un evento onclick che accede alla funzione backgroundImage() come discusso nel metodo precedente:
Infine, dichiara la funzione denominata “ immagine di sfondo() ” allo stesso modo. Qui, accedi all'ID definito utilizzando il ' getElementById() ” e applicare l'immagine di sfondo specificata su di esso. 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 cambiare l'immagine di sfondo 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 utilizzando ' getElementById() ” metodo e applicazione “ immagine di sfondo ” proprietà sul “specificato” paragrafo ”. Questo blog illustra i metodi per modificare le immagini di sfondo in JavaScript.