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>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
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 fazer redirecionamento com PHP
Neste artigo você vai aprender a como fazer redirecionamento com PHP, utilizaremos abordagens fáceis de entender e de aplicar Fala programador(a), beleza? Bora aprender mais […]
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação A popularidade da automação de processos com o n8n está em alta, principalmente […]
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”;
}