Esta publicación describe el funcionamiento y el uso de la propiedad 'backgroundImage' del estilo HTML DOM.
¿Cómo usar la propiedad 'backgroundImage' del estilo HTML DOM en JavaScript?
El estilo HTML DOM “ imagen de fondo La propiedad ” se usa para personalizar el elemento HTML y el documento agregando una imagen de fondo haciendo referencia a su ruta.
Sintaxis (configuración de la propiedad 'backgroundImage')
objeto. estilo . imagen de fondo = 'url('URL')|ninguno|inicial|heredar'La sintaxis anterior admite los siguientes valores de propiedad 'backgroundImage':
- URL('URL'): Especifica la ubicación de la imagen de fondo deseada.
- ninguno: Representa el valor predeterminado, es decir, sin imagen de fondo.
- inicial: Es similar al valor predeterminado del navegador.
- heredar: Hereda la propiedad de su elemento padre.
Sintaxis (URL de retorno de la propiedad 'backgroundImage')
objeto. estilo . imagen de fondoEsta sintaxis devuelve el valor de cadena que contiene la URL de la imagen de fondo agregada.
Usemos las sintaxis definidas arriba de manera práctica para explicar el uso de la propiedad de estilo 'backgroundImage'.
Ejemplo 1: aplique la propiedad de estilo 'backgroundImage' para establecer la imagen de fondo
Este ejemplo aplica el estilo “ imagen de fondo ” para establecer la imagen de fondo deseada para el documento especificando su URL.
código HTML
Primero, eche un vistazo al código HTML indicado:
< h2 > Usar HTML DOM Estilo propiedad backgroundImage en JavaScript h2 >
< botón al hacer clic = 'miFunc()' > Haga clic aquí botón >
En este código:
- El ' La etiqueta ” agrega el subtítulo del nivel 2.
- El '
La etiqueta ” crea un botón que tiene adjunto un “ al hacer clic ” evento para ejecutar la función “ miFunc() ” al hacer clic en el botón.
Código JavaScript
A continuación, siga el código JavaScript dado:
< guion >función myFunc ( ) {
documento. cuerpo . estilo . imagen de fondo = 'url('./html&css/imagen.jpg')' ;
}
guion >
En el fragmento de código anterior:
- La función denominada “ miFunc() ' se define.
- En su definición, el “ estilo.imagen de fondo La propiedad ” aplica el especificado “ URL ” imagen al fondo de todo el documento.
Producción
El resultado muestra que la imagen de fondo se agrega a todo el documento al hacer clic en el botón.
Ejemplo 2: aplique la propiedad 'backgroundImage' de estilo para devolver la URL de la imagen de fondo
El ' imagen de fondo La propiedad ” también es beneficiosa para devolver la URL de la imagen de fondo. Veámoslo de forma práctica.
código HTML
En primer lugar, revise el código HTML escrito:
< h2 > Usar HTML DOM Estilo propiedad backgroundImage en JavaScript h2 >< identificación div = 'miDiv' estilo = 'alto: 500px; ancho: 500px;
borde: 3px negro sólido;imagen de fondo:url('./html&css/image.jpg')' > Este es un div división >
< identificación h4 = 'manifestación' > h4 >
En el bloque de código anterior:
- El ' imagen de fondo La propiedad ” se usa en el elemento “” que agrega una imagen de fondo correspondiente a la URL dada.
- El ' El elemento ” crea un subtítulo vacío de nivel 4 que muestra el valor devuelto (URL) de la imagen de fondo agregada.
Código JavaScript
Ahora, proceda al código JavaScript:
< guion >
dejar img = documento. getElementById ( 'miDiv' ) . estilo . imagen de fondo ;
documento. getElementById ( 'manifestación' ) . HTML interno = imagen ;
guion >En este bloque de código:
- Declarar la variable “ imagen ” que utiliza el “ documento.getElementById() ” para acceder al elemento “” a través de su id “myDiv” y aplica una imagen de fondo a través del “ imagen de fondo ' propiedad.
- A continuación, el método 'document.getElementById()' obtiene el subtítulo vacío utilizando su id 'demo' para mostrar la URL de la imagen de fondo adjunta.
Producción
El resultado muestra la URL de la imagen de fondo aplicada al elemento 'div'.
Conclusión
JavaScript usa el estilo “ imagen de fondo ” propiedad para asignar la imagen de fondo al elemento HTML deseado o devolver su URL. Admite cuatro valores de propiedad para establecer la imagen de fondo, incluidos 'inicial', 'heredar', 'URL' y 'ninguno'. Sin embargo, no admite ningún valor para obtener la URL de la imagen de fondo. Esta publicación proporcionó una breve descripción para usar la propiedad 'backgroundImage' de estilo HTML DOM en JavaScript.