Establezca la imagen de fondo de una función DIV a través de JavaScript
Este artículo explicará los enfoques para establecer la imagen de fondo de un DIV a través de una función en JavaScript.
Cómo establecer la imagen de fondo de un DIV a través de la función en JavaScript?
La imagen de fondo de un DIV a través de una función en JavaScript se puede establecer utilizando los siguientes enfoques:
- "estilo.imagen de fondo" propiedad.
- "setAttribute ()" método.
Enfoque 1: Establezca la imagen de fondo de un DIV con la ayuda de una función en JavaScript utilizando el estilo.Propiedad de antecedentes de antecedentes
El "imagen de fondo"La propiedad devuelve la imagen de fondo del elemento. Esta propiedad se puede utilizar para obtener el "divElemento "con la ayuda de una función definida por el usuario y aplicarle una imagen de fondo.
Sintaxis
objeto.estilo.backgroundImage = "url ('url') | retroceder | Inicial | Heredia"En la sintaxis dada:
- "url"Se refiere a la ubicación del archivo de imagen.
- "atrás"Señala la imagen de fondo.
- "inicial"Se refiere al valor predeterminado de la propiedad.
- "heredar"Indica la herencia de la propiedad desde su elemento principal.
Ejemplo
Sigamos el ejemplo de abajo dados:
Este es el sitio web de Linuxhint
En el fragmento de código anterior, realice los siguientes pasos:
- Incluir la "div"Elemento con el especificado"identificación"Y dimensiones ajustadas.
- Después de eso, incluya el encabezado declarado.
- Además, cree un botón con un adjunto "al hacer clic"Redirección de eventos a la función DivBackground ().
Pasemos a la parte JavaScript del código:
En el fragmento de código anterior:
- Declarar una función llamada "Divbackground ()".
- En su definición, acceda al incluido "div"Elemento por su"identificación" utilizando el "documento.getElementById ()" método.
- Por último, aplique el "estilo.imagen de fondo"Propiedad con la ubicación de la imagen especificada como"url".
- Esto dará como resultado establecer la imagen de fondo en el encabezado y el botón incluidos en el "div".
Producción
En la salida anterior, es evidente que la imagen de fondo se aplica a la contenida "título" y "botón" dentro de "div".
Enfoque 2: Establezca la imagen de fondo de un DIV a través de la función en JavaScript usando el método setattribute ()
El "setAttribute ()El método "establece un nuevo valor en un atributo. Este método se puede aplicar para establecer el atributo como un "imagen de fondo"A la tabla contenida en el"div" elemento.
Sintaxis
elemento.setAttribute (nombre, valor)En la sintaxis anterior:
- "nombre"Se refiere al nombre del atributo.
- "valor"Señala el valor del atributo.
Ejemplo
Echemos un vistazo a las siguientes líneas de código:
| Sr.No | Nombre | Ciudad |
|---|---|---|
| 1 | David | los Angeles |
En el fragmento de código anterior:
- Incluir la "div"Elemento con el especificado"identificación".
- Además, contiene el declarado "mesa" dentro de "div"Con los valores especificados de"cabezal de mesa" y "data de mesa".
- En el siguiente paso, cree un botón con un adjunto "al hacer clic"Evento invoca la función BackgroundImage ().
Continuemos a la parte de JavaScript del código:
En el fragmento de código anterior, realice los siguientes pasos:
- Declarar una función llamada "imagen de fondo()".
- En su definición, acceda al "div"Elemento por su"identificación" utilizando el "documento.getElementById ()" método.
- Después de eso, aplique el "setAttribute ()"Método con la ruta de la imagen especificada como se discutió y el"estilo"Atributo como su parámetro.
Producción
De la salida anterior, se puede observar que la imagen de fondo se agrega a la tabla sobre el botón Haga clic.
Conclusión
El "estilo.imagen de fondo"Propiedad o el"setAttribute ()El método "se puede utilizar para establecer la imagen de fondo de un DIV a través de la función en JavaScript. El enfoque anterior se puede implementar para obtener el "divElemento "con la ayuda de una función definida por el usuario y aplicarle una imagen de fondo. El último método se puede utilizar para establecer la imagen de fondo de la tabla incluida configurando sus atributos (imagen). Este tutorial explica cómo establecer la imagen de fondo de un DIV con la ayuda de una función utilizando JavaScript.