En JavaScript, hay páginas web que necesitan un diseño atractivo, como fondos oscuros que suelen funcionar mejor para las interfaces. Del mismo modo, los fondos blancos permiten que los lectores se centren en el contenido, por lo que los portales de noticias o blogs utilizan un fondo comparativamente claro con texto oscuro. En tales casos, JavaScript se vuelve muy útil para formatear y mejorar el diseño del documento.
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 “ DOM ”.
- “ getElementById() ” método y “ imagen de fondo ” propiedad en “ párrafo ”.
¡Revise los métodos discutidos uno por uno!
Método 1: cambiar la imagen de fondo en JavaScript usando la propiedad backgroundImage en DOM.
Los ' imagen de fondo La propiedad ” ajusta la imagen de fondo del elemento especificado. Esta técnica se puede aplicar aplicando la propiedad backgroundImage y especificando la imagen de fondo ubicando su ruta como argumento.
Sintaxis
En la sintaxis anterior, “ URL ” se refiere a la ruta 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 que redirige a un
función llamada backgroundImage():
Ahora, una función “ imagen de fondo() ” será declarado y el “ documento.cuerpo.estilo.imagen de fondo ” accederá a la imagen de fondo usando la ruta de la imagen especificada en su argumento:
El resultado de la implementación anterior resultará de la siguiente manera:
Método 2: cambiar la imagen de fondo en JavaScript usando el método getElementById() y la propiedad backgroundImage en el párrafo
Los ' getElementById() El método ” devuelve un elemento con un valor especificado y el “ imagen de fondo ”, 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 de un párrafo en particular.
Sintaxis
Aquí, ' elementos ” se refiere a la identificación de un elemento.
Lea el siguiente ejemplo para una mejor comprensión del concepto establecido.
Ejemplo
Primero, incluya un párrafo en la etiqueta
y asígnele una identificación específica:
Luego, cree un botón con un evento onclick accediendo a la función backgroundImage() como se discutió en el método anterior:
Por último, declara la función llamada “ imagen de fondo() ' similar. Aquí, acceda al Id definido usando el ' getElementById() ” 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 “ DOM ' para aplicar la imagen de fondo especificada en toda la página web usando una función u obteniendo la identificación particular usando ' getElementById() “método y aplicación” imagen de fondo ” propiedad en el especificado “ párrafo ”. Este blog ilustra los métodos para cambiar las imágenes de fondo en JavaScript.