Como definir a cor de fundo CSS do HTML usando JavaScript
Como posso definir a cor de fundo CSS de um elemento HTML usando JavaScript?
Em geral, as propriedades CSS são convertidas em JavaScript tornando-as camelCase sem travessões. Assim background-colorse torna backgroundColor.
Eu gostaria de adicionar a cor que obviamente precisa estar entre aspas element.style.backgroundColor = "color"; por exemplo - element.style.backgroundColor = "orange"; excelente resposta
Em testes Selenium: ((IJavaScriptExecutor) WebDriver) .ExecuteScript ("arguments [0] .style.background = 'yellow';", webElement);
@Catto Nesse caso, a cor é um argumento para a função, portanto, não deve estar entre aspas. No entanto, você está certo que normalmente, ao definir uma cor, as aspas duplas seriam necessárias em JS.
Você pode achar que seu código é mais sustentável se você mantiver todos os seus estilos, etc. em CSS e apenas definir / remover nomes de classe em JavaScript.
Seu CSS seria obviamente algo como:
Depois, em JavaScript:
Eu diria que é óbvio onde colocá-lo - em qualquer lugar após o HTML que você deseja alterar.
Isso é válido na maioria dos casos, mas não nos casos em que a cor (ou qualquer atributo) é definido na configuração, ou o usuário inserido, você não pode criar uma classe CSS para todas as cores possíveis;)
Ou, usando um pouco de jQuery:
Muito provavelmente, como o OP pediu Javascript;)
Adicione este elemento de script ao seu elemento de corpo:
element.style.background-colornão é JavaScript válido. É por isso que as propriedades CSS são convertidas em CamelCase.
Você pode fazer isso com JQuery:
como podemos fazer isso para a aula?
Para a auladocument.getElementByClass('element').style.background = '#DD00DD';
existem tantas maneiras que acho muito fácil e simples
Demonstração no Plunker
Usando jquery podemos direcionar a classe ou Id do elemento para aplicar o fundo css ou qualquer outro estilo
isto é jquery, não javascript
@vignesh jQuery é JavaScript -__-
@Novocaine jQuery é escrito usando JavaScript, sim. mas $ não vai funcionar a menos que você inclua a biblioteca jQuery;)
Alterando CSS de um HTMLElement
Você pode alterar a maioria das propriedades CSS com JavaScript, use esta instrução:
onde <selector>, <property>, <new style>são todos Stringobjetos.
Normalmente, a propriedade de estilo terá o mesmo nome que o nome real usado em CSS. Mas sempre que houver mais de uma palavra, será o caso de camelo: por exemplo, background-coloré alterado com backgroundColor.
A seguinte declaração definirá o fundo de #containerpara a cor vermelha:
Aqui está uma rápida demonstração mudando a cor da caixa a cada 0,5s:
Alterar CSS de múltiplos HTMLElement
Imagine que você gostaria de aplicar estilos CSS a mais de um elemento, por exemplo, fazer a cor de fundo de todos os elementos com o nome da classe box lightgreen. Então você pode:
selecione os elementos .querySelectorAlle os desembrulhe em um objeto Arraycom a sintaxe de desestruturação :
faça um loop sobre a matriz com .forEache aplique a alteração a cada elemento:
Se você deseja alterar várias propriedades de estilo de um elemento mais de uma vez, você pode considerar o uso de outro método: vincule este elemento a outra classe.
Supondo que você possa preparar os estilos de antemão em CSS, você pode alternar as classes acessando o classListdo elemento e chamando a togglefunção:
Lista de propriedades CSS em JavaScript
Um simples js pode resolver isso:
Há respostas corretas mais do que suficientes para essa pergunta, e essa resposta não oferece nada melhor do que outras respostas.
Como disse Novocaine, há muitas respostas aqui. Porém, no futuro, considere editar sua postagem para adicionar mais explicações sobre o que seu código faz e por que ele resolverá o problema. Uma resposta que contém principalmente código (mesmo que esteja funcionando) geralmente não ajudará o OP a entender o problema.