Como alterar a imagem de fundo em JavaScript

No JavaScript, existem páginas da web que precisam de um layout atraente, como fundos escuros que geralmente funcionam melhor para interfaces. Da mesma forma, os fundos brancos permitem que os leitores se concentrem no conteúdo e, portanto, os portais ou blogs de notícias usam um fundo comparativamente leve com texto escuro. Nesses casos, o JavaScript se torna muito útil na formatação e melhoria do design de documentos.

Este artigo discutirá os métodos para alterar a imagem de fundo em JavaScript.

Como alterar a imagem de fundo em JavaScript?

Para alterar a imagem de fundo em JavaScript, as seguintes abordagens podem ser utilizadas:

• ““imagem de fundo"Propriedade em"Dom”.
• ““getElementById ()”Método e“imagem de fundo"Propriedade em"parágrafo”.

Passar pelos métodos discutidos um por um!

Método 1: Altere a imagem de fundo em JavaScript usando a propriedade BackgroundImage no DOM.

O "imagem de fundo”A propriedade ajusta a imagem de fundo do elemento especificado. Esta técnica pode ser aplicada aplicando a propriedade de BackgroundImage e especificando a imagem de fundo, localizando seu caminho como um argumento.

Sintaxe

Na sintaxe acima, “Url”Refere -se ao caminho da imagem.

Veja o exemplo a seguir para demonstração.

Exemplo

Neste exemplo, um botão será incluído no valor especificado e um “ONCLICK”Evento redirecionando para um
Função denominada BackgroundImage ():

Agora, uma função “imagem de fundo()”Será declarado e o“documento.corpo.estilo.imagem de fundo”A propriedade acessará a imagem em segundo plano usando o caminho da imagem especificado em seu argumento:

A saída da implementação acima resultará da seguinte maneira:

Método 2: Alterar a imagem de fundo em JavaScript usando o método getElementById () e a propriedade BackgroundImage no parágrafo

O "getElementById ()”O método retorna um elemento com um valor especificado e o“imagem de fundoPropriedade, como afirmado acima, retorna a imagem de fundo do elemento específico especificado em seu argumento. Este método pode ser aplicado para mapear a cor especificada no fundo do parágrafo específico.

Sintaxe

Aqui, "ElementId”Refere -se ao ID de um elemento.

Passe pelo exemplo a seguir para uma melhor compreensão do conceito declarado.

Exemplo

Primeiro, inclua um parágrafo no

Marque e atribua um ID específico:

Em seguida, crie um botão com um evento OnClick acessando o FunctionImage () da função (), conforme discutido no método anterior:

Por fim, declare a função chamada “imagem de fundo()" de forma similar. Aqui, acesse o ID definido usando o “getElementById ()”Método e aplique a imagem de fundo especificada nela. Isso resultará na implementação da cor nos antecedentes do parágrafo:

Saída

Nós compilamos o método mais fácil para alterar a imagem de fundo em JavaScript

Conclusão

Para alterar a imagem de fundo em JavaScript, aplique o “imagem de fundo"Propriedade em"Dom”Para aplicar a imagem de fundo especificada em toda a página da web usando uma função ou obtendo o ID específico usando“getElementById ()”Método e aplicação“imagem de fundo”Propriedade na especificação“parágrafo”. Este blog ilustra os métodos para alterar as imagens de fundo em JavaScript.