Como alterar o background com JavaScript
Neste artigo veremos como alterar o background com JavaScript, de um modo simples para que os elementos fiquem com a cor de fundo necessária
Fala programador(a), beleza? Bora aprender coisa nova! 😀
Sabemos que com CSS podemos mudar a cor de fundo do elemento com o background-color e com JS?
É muito fácil também, primeiramente precisamos selecionar o elemento
Depois precisamos entrar na propriedade style e modificar o valor da propriedade backgroundColor dentro de style, para o valor da cor que queremos
E então a cor será substituída no HTML, replicando para a página web
Vamos a um exemplo prático:
<!DOCTYPE html>
<html>
<head>
<title>Como alterar o background com JavaScript</title>
<meta charset="utf-8">
</head>
<body>
<div id="container"></div>
</body>
</html>
Formação Claude Code
Domine Claude Code do absoluto zero até o avançado
- 116 aulas
- 4 projetos
- 9h 23min
Este é o nosso HTML, perceba que temos um elemento #container que posteriormente iremos alterar o background
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
E veja o CSS do exemplo também:
#container {
width: 500px;
height: 200px;
border: 1px solid red;
}
Apenas delimitamos uma altura e largura, e também adicionamos uma borda
Veja no navegador:
Agora falta o JavaScript, que é o que vai fazer a mágica, veja:
let container = document.getElementById('container');
container.style.backgroundColor = '#000';
Conforme dito anteriormente, selecionamos o elemento com o getElementById
E por fim mudamos o backgroundColor para #000, que é a cor preta
Olha como ficou no navegador:EE
E assim novo objetivo foi atingido, conseguimos alterar o background com JavaScript de um modo fácil e rápido
Conclusão
Neste artigo vimos como mudar o background de um elemento no HTML com JavaScript
Utilizamos um método de seleção por id, getElementById, e depois alteramos a propriedade backgroundColor que fica na propriedade style
Mudando assim a cor de fundo da div alvo
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube
Mudar a cor direto no código é legal pra entender, mas na vida real quase sempre tu quer trocar o fundo quando o usuário faz algo, tipo clicar num botão
Se liga como fica juntando o que já vimos com um addEventListener:
<button id="trocar">Trocar cor</button> <div id="container"></div>
Agora o JavaScript:
let botao = document.getElementById(‘trocar’); let container = document.getElementById(‘container’);
botao.addEventListener(‘click’, function() { container.style.backgroundColor = ‘#000’; });
Aqui a gente escuta o evento de clique no botão, e só quando ele acontece a cor de fundo do container muda
É o mesmo backgroundColor de antes, a diferença é que agora ele roda dentro do clique, e não solto no código
E se tu quiser mudar o fundo da página toda, não só de uma div?
Aí o elemento que a gente seleciona é o body, se liga:
document.body.style.backgroundColor = ‘#000’;
Só isso, o document.body já aponta pro body do teu HTML, não precisa de getElementById
O resto é igualzinho, entra no style e mexe no backgroundColor
Nem sempre é cor, as vezes tu quer uma imagem de fundo
A lógica é a mesma, muda só a propriedade, que agora é o backgroundImage:
let container = document.getElementById(‘container’);
container.style.backgroundImage = ‘url(imagem.jpg)’;
Repara no url() ali dentro das aspas, é do mesmo jeito que tu escreveria no CSS
Se a imagem não aparecer, confere o caminho do arquivo, é o erro mais comum aqui
Talvez tu tenha visto por aí o querySelector no lugar do getElementById, e fica na dúvida de qual usar
Os dois selecionam o elemento, a diferença é como tu aponta pra ele
Com getElementById tu passa só o id:
document.getElementById(‘container’);
Já o querySelector usa o seletor igual no CSS, então o id vai com # na frente:
document.querySelector(‘#container’);
Depois de selecionar, o resto é idêntico, tu entra no style e mexe no backgroundColor do mesmo jeito
O querySelector é mais flexível porque também pega classe (.minhaClasse) e tag, mas pro nosso caso de id os dois resolvem
Como mudar a cor de fundo com JavaScript? Tu seleciona o elemento (com getElementById, por exemplo) e altera a propriedade backgroundColor dentro do style, colocando a cor que quer
Dá pra usar nome de cor em vez de hexadecimal? Dá sim, o backgroundColor aceita ‘red’, ‘blue’, ‘black’ e também rgb() e rgba(), do mesmo jeito que o CSS aceita
Por que a cor não muda quando eu rodo o código? Geralmente é o elemento que não foi encontrado, confere se o id no getElementById é exatamente o mesmo do HTML, e se o script roda depois do elemento existir na página
Qual a diferença entre background e backgroundColor no JavaScript? O backgroundColor mexe só na cor, o background é a propriedade curta que junta cor, imagem e mais coisas de uma vez, pra trocar só a cor o backgroundColor é o caminho direto
Leia também
Matheus Battisti
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Blog | Mais populares
As diferenças de var, let e const
Como redirecionar para outra página com JavaScript
Exercícios de lógica de programação JavaScript com gabarito
Quais são os melhores exercícios lógica de programação JavaScript? Colocar em prática os exercícios de lógica de programação em JavaScript é de extrema importância para […]
Eu posso fazer isso numa tabela?
Não estou conseguindo…..
let colerchange = document.getElementById(“colerchange”);
if(arr[0].PLAN_QUANTITY – 0===1){
colerchange.style.backgroundcolor= “#FF0000”;
console.log(“pauro1”)
}else{
console.log(“pauloNo1”);
colerchange.style.backgroundcolor= “#FF0000”;
}