Defina a imagem de fundo de uma função de divulga em JavaScript
Este artigo explicará as abordagens para definir a imagem de fundo de uma div por meio de uma função em JavaScript.
Como definir a imagem de fundo de uma função por função em javascript?
A imagem de fundo de uma div por meio de uma função em JavaScript pode ser definida usando as seguintes abordagens:
- ““estilo.imagem de fundo" propriedade.
- ““setAttribute ()”Método.
Abordagem 1: Defina a imagem de fundo de uma div com a ajuda de uma função em JavaScript usando o estilo.Propriedade do BackgroundImage
O "imagem de fundo”Propriedade retorna a imagem de fundo do elemento. Esta propriedade pode ser utilizada para buscar o “div”Elemento com a ajuda de uma função definida pelo usuário e aplique uma imagem de fundo.
Sintaxe
objeto.estilo.BackgroundImage = "url ('url') |Na sintaxe dada:
- ““url”Refere -se à localização do arquivo de imagem.
- ““voltar”Aponta para a imagem de fundo.
- ““inicial”Refere -se ao valor padrão da propriedade.
- ““herdar”Indica a herança da propriedade de seu elemento pai.
Exemplo
Vamos seguir o exemplo abaixo:
Este é o site Linuxhint
No trecho de código acima, execute as seguintes etapas:
- Inclua o “div”Elemento com o especificado“eu ia”E dimensões ajustadas.
- Depois disso, inclua o cabeçalho declarado.
- Além disso, crie um botão com um anexo “ONCLICK”Evento redirecionando para a função Divbackground ().
Vamos para a parte JavaScript do código:
No trecho de código acima:
- Declare uma função chamada “Divbackground ()”.
- Em sua definição, acesse o incluído “div”Elemento por seu“eu ia”Usando o“documento.getElementById ()”Método.
- Por fim, aplique o “estilo.imagem de fundo”Propriedade com a localização da imagem especificada como“url”.
- Isso resultará na definição da imagem em segundo plano para o cabeçalho e o botão incluídos no “div”.
Saída
Na saída acima, é evidente que a imagem de fundo é aplicada ao contido “cabeçalho" e "botão" dentro do "div”.
Abordagem 2: Defina a imagem de fundo de uma função em JavaScript usando o método setAttribute ()
O "setAttribute ()”Método define um novo valor para um atributo. Este método pode ser aplicado para definir o atributo como um “imagem de fundo”Para a tabela contida no“div" elemento.
Sintaxe
elemento.setattribute (nome, valor)Na sintaxe acima:
- ““nome”Refere -se ao nome do atributo.
- ““valor”Aponta para o valor do atributo.
Exemplo
Vamos dar uma olhada nas seguintes linhas de código:
| Sr.Não | Nome | Cidade |
|---|---|---|
| 1 | David | Los Angeles |
No trecho de código acima:
- Inclua o “div”Elemento com o especificado“eu ia”.
- Além disso, contém o declarado “mesa" dentro do "div”Com os valores especificados de“Header de mesa" e "tabela dados”.
- Na próxima etapa, crie um botão com um anexo “ONCLICKEvento invocando a função BackgroundImage ().
Vamos continuar até a parte JavaScript do Código:
No trecho de código acima, execute as seguintes etapas:
- Declare uma função chamada “imagem de fundo()”.
- Em sua definição, acesse o “div”Elemento por seu“eu ia”Usando o“documento.getElementById ()”Método.
- Depois disso, aplique o “setAttribute ()”Método com o caminho da imagem especificada, conforme discutido e o“estilo”Atributo como seu parâmetro.
Saída
Na saída acima, pode -se observar que a imagem de fundo é adicionada à tabela sobre o botão Clique.
Conclusão
O "estilo.imagem de fundo"Propriedade ou a"setAttribute ()”O método pode ser utilizado para definir a imagem de fundo de uma div por meio de função em JavaScript. A abordagem anterior pode ser implementada para buscar o “div”Elemento com a ajuda de uma função definida pelo usuário e aplique uma imagem de fundo. O último método pode ser utilizado para definir a imagem de fundo da tabela incluída, definindo seus atributos (imagem). Este tutorial explica como definir a imagem de fundo de uma div com a ajuda de uma função usando JavaScript.