Alterar a cor de fundo em JavaScript
Este tutorial irá discutir como alterar a cor de fundo usando a propriedade backgroundColor em JavaScript.
Altere a cor de fundo usando a propriedade backgroundColor em JavaScript
Podemos mudar a cor de fundo usando a propriedade backgroundColor em JavaScript. Para usar esta propriedade, você precisa obter o elemento cuja cor de fundo você deseja alterar e, em seguida, pode usar a propriedade backgroundColor para definir a cor de fundo.
Por exemplo, vamos criar uma página usando HTML e alterar a cor de fundo do corpo para verde usando a propriedade backgroundColor. Veja o código abaixo.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
document.body.style.backgroundColor = 'green';
</script>
</body>
</html>
Você também pode obter o elemento com o id ou nome da classe. Para obter um elemento usando seu id, você pode usar a função getElementById(). Para obter um elemento usando sua classe, você pode usar a função getElementsByClassName().
Por exemplo, vamos pegar um elemento por seu id e mudar sua cor de fundo usando a propriedade backgroundColor. Veja o código abaixo.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p id='myID'>
Hello Wold
</p>
<script type="text/javascript">
document.getElementById('myID').style.backgroundColor = 'green';
</script>
</body>
</html>
O código acima só mudará a cor de fundo do elemento com id myID e não a seção do corpo inteiro. Você também altera a cor de fundo de um elemento usando o código de cores de cores diferentes, em vez de alterá-lo usando o nome da cor.
Vamos escrever um código para alterar a cor de fundo de um texto usando um botão. Veja o código abaixo.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button onClick="Mycolor()">Change Color</button>
<div id="myID">Hello World</div>
<script type='text/javascript'>
function Mycolor() {
var element = document.getElementById("myID");
element.style.backgroundColor='#900';
}
</script>
</body>
</html>
Neste código, você verá um botão e um texto. Quando você pressiona o botão, a cor de fundo do texto muda de acordo com a cor fornecida.
