Cambiar el color de fondo en JavaScript
Este tutorial discutirá cómo cambiar el color de fondo usando la propiedad backgroundColor en JavaScript.
Cambiar el color de fondo usando la propiedad backgroundColor en JavaScript
Podemos cambiar el color de fondo usando la propiedad backgroundColor en JavaScript. Para usar esta propiedad, necesita obtener el elemento cuyo color de fondo desea cambiar, y luego puede usar la propiedad backgroundColor para establecer el color de fondo.
Por ejemplo, creemos una página usando HTML y cambiemos el color de fondo del cuerpo a verde usando la propiedad backgroundColor. Vea el código a continuación.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
document.body.style.backgroundColor = 'green';
</script>
</body>
</html>
También puede obtener el elemento con la identificación o el nombre de la clase. Para obtener un elemento usando su id, puede usar la función getElementById(). Para obtener un elemento usando su clase, puede usar la función getElementsByClassName().
Por ejemplo, obtengamos un elemento por su id y cambiemos su color de fondo usando la propiedad backgroundColor. Vea el código a continuación.
<!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>
El código anterior solo cambiará el color de fondo del elemento con id myID y no toda la sección del cuerpo. También cambia el color de fondo de un elemento usando el código de color de diferentes colores en lugar de cambiarlo usando el nombre del color.
Escribamos un código para cambiar el color de fondo de un texto usando un botón. Vea el código a continuación.
<!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>
En este código, verá un botón y un texto. Cuando presiona el botón, el color de fondo del texto cambiará de acuerdo con el color dado.
