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

alterando o background com javascript capa

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:

background com js ex 1

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:EEbackground com js ex 2

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

Subscribe
Notify of
guest

1 Comentário
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Paulo

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”;
  }

0
Responder