Cómo cambiar la imagen de fondo en JavaScript

En JavaScript, hay páginas web que necesitan un diseño atractivo, como fondos oscuros que generalmente funcionan mejor para las interfaces. Del mismo modo, los fondos blancos permiten a los lectores centrarse en el contenido, por lo que los portales o blogs de noticias usan un fondo relativamente ligero con texto oscuro. En tales casos, JavaScript se vuelve muy útil en el formato y mejora del diseño de documentos.

Este artículo discutirá los métodos para cambiar la imagen de fondo en JavaScript.

Cómo cambiar la imagen de fondo en JavaScript?

Para cambiar la imagen de fondo en JavaScript, se pueden utilizar los siguientes enfoques:

• "imagen de fondo"Propiedad en"Domina".
• "getElementById ()"Método y"imagen de fondo"Propiedad en"párrafo".

Pasar por los métodos discutidos uno por uno!

Método 1: Cambiar la imagen de fondo en JavaScript utilizando la propiedad de BackgroundImage en DOM.

El "imagen de fondo"La propiedad ajusta la imagen de fondo del elemento especificado. Esta técnica se puede aplicar aplicando la propiedad de backgroundImage y especificando la imagen de fondo localizando su ruta como argumento.

Sintaxis

En la sintaxis anterior, "Url"Se refiere al camino de la imagen.

Mire el siguiente ejemplo para la demostración.

Ejemplo

En este ejemplo, se incluirá un botón con el valor especificado y un "al hacer clic"Evento redirigiendo a un
función llamada backgroundImage ()::

Ahora, una función "imagen de fondo()"Será declarado y el"documento.cuerpo.estilo.imagen de fondo"La propiedad accederá a la imagen de fondo utilizando la ruta de imagen especificada en su argumento:

La salida de la implementación anterior dará como resultado lo siguiente:

Método 2: Cambiar la imagen de fondo en JavaScript utilizando el método getElementById () y la propiedad de INTENCUSEMAGE en el párrafo

El "getElementById ()"El método devuelve un elemento con un valor especificado y el"imagen de fondoLa propiedad, como se indicó anteriormente, devuelve la imagen de fondo del elemento particular especificado en su argumento. Este método se puede aplicar para mapear el color especificado en el fondo del párrafo particular.

Sintaxis

Aquí, "elemento"Se refiere a la identificación de un elemento.

Revisar el siguiente ejemplo para una mejor comprensión del concepto declarado.

Ejemplo

Primero, incluya un párrafo en el

etiqueta y asigna una identificación específica:

A continuación, cree un botón con un evento OnClick que acceda a la función BackgroundImage () como se discutió en el método anterior:

Por último, declare la función llamada "imagen de fondo()" similarmente. Aquí, acceda a la identificación definida usando el "getElementById ()"Método y aplique la imagen de fondo especificada en él. Esto dará como resultado la implementación del color en el fondo del párrafo:

Producción

Hemos compilado el método más fácil para cambiar la imagen de fondo en JavaScript

Conclusión

Para cambiar la imagen de fondo en JavaScript, aplique el "imagen de fondo"Propiedad en"Domina"Para aplicar la imagen de fondo especificada en toda la página web utilizando una función o obteniendo la ID particular utilizando"getElementById ()"Método y aplicación"imagen de fondo"Propiedad en la especificada"párrafo". Este blog ilustra los métodos para cambiar las imágenes de fondo en JavaScript.