cor de fundo CSS em JavaScript

votos
87

Como posso definir a cor de fundo CSS de um elemento HTML usando JavaScript?

Publicado 06/08/2008 em 13:23
fonte usuário
Em outras línguas...                            
16 respostas
votos
21

var element = document.getElementById('element'); element.style.background = '#FF00AA';

Respondeu 06/08/2008 em 13:25
fonte usuário
votos
134

Em geral, as propriedades CSS são convertidos em JavaScript, tornando-os camelCase sem quaisquer traços. Assim, background-colortorna-se backgroundColor.

function setColor(element, color)
{
    element.style.backgroundColor = color;
}
Respondeu 06/08/2008 em 13:25
fonte usuário
votos
19

Ou, usando um pouco de jQuery:

$('#fieldID').css('background-color', '#FF6600');
Respondeu 06/08/2008 em 14:23
fonte usuário
votos
27

Você pode encontrar o seu código é mais sustentável se manter todos os seus estilos, etc, em CSS e apenas definir / nomes de classes não definidas em JavaScript.

Seu CSS seria, obviamente, algo como:

.highlight {
    background:#ff00aa;
}

Então, em JavaScript:

element.className = element.className === 'highlight' ? '' : 'highlight';
Respondeu 19/08/2008 em 12:59
fonte usuário
votos
6

Adicionar este elemento script para o elemento do corpo:

<body>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#AAAAAA";
  </script>
</body>
Respondeu 03/03/2011 em 22:20
fonte usuário
votos
2

BEIJO Resposta:

document.getElementById('element').style.background = '#DD00DD';
Respondeu 02/03/2013 em 00:57
fonte usuário
votos
2

Você pode usar:

  <script type="text/javascript">
     Window.body.style.backgroundColor = "#5a5a5a";
  </script>
Respondeu 05/01/2014 em 13:51
fonte usuário
votos
2

Você pode fazê-lo com JQuery: 

$(".class").css("background","yellow");
Respondeu 10/02/2014 em 18:13
fonte usuário
votos
1

você pode usar 

$('#elementID').css('background-color', '#C0C0C0');
Respondeu 11/04/2014 em 02:34
fonte usuário
votos
5 

var element = document.getElementById('element');

element.onclick = function() {
  element.classList.add('backGroundColor');
  
  setTimeout(function() {
    element.classList.remove('backGroundColor');
  }, 2000);
};
.backGroundColor {
    background-color: green;
}
<div id="element">Click Me</div>

Respondeu 17/04/2015 em 16:07
fonte usuário
votos
3

Você pode tentar este

var element = document.getElementById('element_id');
element.style.backgroundColor = "color or color_code";

Exemplo.

var element = document.getElementById('firstname');
element.style.backgroundColor = "green";//Or #ff55ff

jsFiddle

Respondeu 03/09/2015 em 12:21
fonte usuário
votos
-1 
$(".class")[0].style.background = "blue";
Respondeu 11/11/2015 em 08:44
fonte usuário
votos
0 
$("body").css("background","green"); //jQuery

document.body.style.backgroundColor = "green"; //javascript

tantas maneiras estão lá eu acho que é muito fácil e simples

Demo no Plunker

Respondeu 13/03/2017 em 20:51
fonte usuário
votos
2 
$('#ID / .Class').css('background-color', '#FF6600');

Usando jQuery que pode direcionar a classe do elemento ou Id aplicar fundo CSS ou qualquer outro stylings

Respondeu 23/06/2017 em 09:56
fonte usuário
votos
-1

javascript:

document.getElementById("ID").style.background = "colorName"; //JS ID

document.getElementsByClassName("ClassName")[0].style.background = "colorName"; //JS Class

jquery:

$('#ID/.className').css("background","colorName") // One style

$('#ID/.className').css({"background":"colorName","color":"colorname"}); //Multiple style
Respondeu 23/06/2017 em 10:02