Quiero cambiar el color de un elemento cuando el body HTML tiene el mismo color para el background .
Utilizo el elemento del body con varios colores y, a veces, el texto no se podía leer. Necesito cambiar el color del texto, por ejemplo, a negro cuando mi cuerpo HTML carga un color de fondo blanco.
Aquí está mi código:
var i = 0;
function change() {
var doc = document.getElementById("background__color");
var color = ["#15ec34", "#077981", "#8fe607", "#4a66ea"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
}
setInterval(change, 1000);
// Here is the code to change the text color
var doc = document.getElementById("background__color");
var changeColor = document.querySelector("#ch")
if (doc.style.backgroundColor == "black") {
changeColor.style.color = "#fff";
}
<body id="background__color">
<div>
<div class="greeting">
<p id="ch">Hello world!</p>
</div>
</div>
</body>
poner todo dentro de la función
var i = 0;
function change() {
var changeColor = document.querySelector("#ch")
var doc = document.getElementById("background__color");
var color = ["#15ec34", "#077981", "#8fe607", "#4a66ea", "black"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
if (doc.style.backgroundColor === "black") {
changeColor.style.color = "#fff";
} else {
changeColor.style.color = "red"
}
}
setInterval(change, 1000);
#ch {
font-size: 54px;
}
<body id="background__color">
<div>
<div class="greeting">
<p id="ch">Hello world!</p>
</div>
</div>
</body>
Más tarde puede cambiar el color según sus requisitos.