Como posso alterar a cor de fundo com o JavaScript?
16 answers
Modificar a propriedade JavaScript document.body.style.background.
Por exemplo:
function changeBackground(color) {
document.body.style.background = color;
}
<BODY onload="changeBackground('red');">
Nota: Isto depende um pouco da forma como a sua página é colocada em conjunto, por exemplo, se estiver a usar um contentor DIV com uma cor de fundo diferente, terá de modificar a cor de fundo desse, em vez do corpo do documento.
Você não precisa do AJAX para isto, apenas de um programa java simples que configure a propriedade de fundo-cor do elemento do corpo, como este:
document.body.style.backgroundColor = "#AA0000";
Se você quiser fazê-lo como se fosse iniciado pelo servidor, você teria que pesquisar o servidor e, em seguida, mudar a cor de acordo.
className é uma abordagem mais bonita. Meu argumento no entanto é que um className pode ser considerado como uma definição de "por que você quer que o fundo seja esta ou aquela cor."
Por exemplo, torná-lo vermelho não é apenas porque você quer ele vermelho, mas porque você gostaria de informar os usuários de um erro. Como tal, definir o className AnErrorHasOccured no corpo seria a minha implementação preferida.
Em css
body.AnErrorHasOccured
{
background: #f00;
}
Em JavaScript:
document.body.className = "AnErrorHasOccured";
Isto deixa-lhe as opções de estilo de mais elementos de acordo com este className. E como tal, ao definir um className Você meio que dá à página um certo estado.
O AJAX está a obter dados do servidor usando Javascript e XML de uma forma assíncrona. A menos que você queira baixar o código de cores do servidor, não é isso que você está realmente almejando!
Mas caso contrário, poderá definir o fundo do CSS com o Javascript. Se você está usando um framework como o jQuery, será algo assim: [[4]}
$('body').css('background', '#ccc');
document.body.style.background = "#ccc";
Podes fazê-lo de maneiras diferentes. Passo 1
var imageUrl= "URL OF THE IMAGE HERE";
var BackgroundColor="RED"; // what ever color you want
Para alterar o fundo do corpo
document.body.style.backgroundImage=imageUrl //changing bg image
document.body.style.backgroundColor=BackgroundColor //changing bg color
Para mudar um elemento com ID
document.getElementById("ElementId").style.backgroundImage=imageUrl
document.getElementById("ElementId").style.backgroundColor=BackgroundColor
Para elementos com a mesma classe
var elements = document.getElementsByClassName("ClassName")
for (var i = 0; i < elements.length; i++) {
elements[i].style.background=imageUrl;
}
document.body.style.backgroundColor = 'pink';
Abordagem Css:
Se quiser ver a cor contínua, use este código:
body{
background-color:black;
animation: image 10s infinite alternate;
animation:image 10s infinite alternate;
animation:image 10s infinite alternate;
}
@keyframes image{
0%{
background-color:blue;
}
25%/{
background-color:red;
}
50%{
background-color:green;
}
75%{
background-color:pink;
}
100%{
background-color:yellow;
}
}
Se quiser vê-lo mais rápido ou mais lento, mude 10 segundos para 5 segundos, etc.
Você pode mudar o fundo de uma página usando simplesmente:
document.body.style.background = #000000; //I used black as color code
No entanto, o programa abaixo irá alterar o fundo da página após cada 3 segundos usando a função setTimeout ():
$(function() {
var colors = ["#0099cc","#c0c0c0","#587b2e","#990000","#000000","#1C8200","#987baa","#981890","#AA8971","#1987FC","#99081E"];
setInterval(function() {
var bodybgarrayno = Math.floor(Math.random() * colors.length);
var selectedcolor = colors[bodybgarrayno];
$("body").css("background",selectedcolor);
}, 3000);
})
LEIA MAIS
DEMONSTRAÇÃO
document.body.className = className;
Isto irá alterar a cor de fundo de acordo com a escolha do utilizador seleccionado no menu:
function changeBG() {
var selectedBGColor = document.getElementById("bgchoice").value;
document.body.style.backgroundColor = selectedBGColor;
}<select id="bgchoice" onchange="changeBG()">
<option></option>
<option value="red">Red</option>
<option value="ivory">Ivory</option>
<option value="pink">Pink</option>
</select>Adicione este elemento do programa ao seu elemento corporal, alterando a cor como desejar:
<body>
<p>Hello, World!</p>
<script type="text/javascript">
document.body.style.backgroundColor = "#ff0000"; // red
</script>
</body>Mas você gostaria de configurar a cor do corpo antes do elemento <body> existir. Assim tem a cor certa desde o início.
<script>
var myColor = "#AAAAAA";
document.write('\
<style>\
body{\
background-color: '+myColor+';\
}\
</style>\
');
</script>
Isto pode ser colocado no <head> do documento ou no seu ficheiro js.
var myColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
Sugiro o seguinte código:
<div id="example" onClick="colorize()">Click on this text to change the
background color</div>
<script type='text/javascript'>
function colorize() {
var element = document.getElementById("example");
element.style.backgroundColor='#800';
element.style.color='white';
element.style.textAlign='center';
}
</script>
Se deseja usar um botão ou outro evento, basta usar isto em JS:
document.querySelector("button").addEventListener("click", function() {
document.body.style.backgroundColor = "red";
});
Você pode mudar o fundo de uma página usando simplesmente:
function changeBodyBg(color){
document.body.style.background = color;
}
Leia mais @ mudando a cor de fundo
Este é um código simples para mudar o fundo usando javascript
<body onLoad="document.bgColor='red'">