Estoy tratando de hacer un temporizador y hacerlo de modo que cuando el tiempo sea inferior a 10 segundos, el texto se vuelva rojo. Estoy usando backgorund-clip para darle estilo a mi texto, pero por alguna razón mi js no le da estilo al fondo del elemento que quiero.
Aquí está mi JavaScript:
if (miliseconds < 10 && seconds < 10) document.getElementById("timer").textContent = `0${seconds}:0${miliseconds}`; else if (miliseconds < 10) document.getElementById("timer").textContent = `${seconds}:0${miliseconds}`; else if (seconds < 10) { document.getElementById("timer").textContent = `0${seconds}:${miliseconds}`; document.getElementById("timer-back-2").style.background = "repeating-linear-gradient(to left, red, red 5px, black 5px, black 6px);"; } else { document.getElementById("timer").textContent = `${seconds}:${miliseconds}`; document.getElementById("timer-back-2").style.background = "repeating-linear-gradient(to left, blue, blue 5px, black 5px, black 6px);" }y aquí está mi CSS:
#timer-back-2{ width: 100%; height: 100%; margin: 0; background: repeating-linear-gradient(to left, yellow, yellow 5px, black 5px, black 6px); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #timer{ width: 100%; height: 100%; margin: 0; background: repeating-linear-gradient(to top, transparent, transparent 5px, black 5px, black 6px); z-index: 3; font-size: 50px; font-family: "8-bit-operator"; display: flex; justify-content: center; align-items: center; -webkit-background-clip: text; background-clip: text; }No intente alternar el valor de la propiedad en javascript, use clases en su lugar. Use background-image en lugar de background para repeating-linear-gradient() , de lo contrario, la propiedad de fondo de las otras clases podría anular las otras propiedades de fondo ya establecidas.
const timer = document.getElementById('timer-back-2'); // turn it red timer.classList.add("red"); // turn it blue timer.classList.remove("red"); timer.classList.add("blue"); // turn it yellow timer.classList.remove("red"); timer.classList.remove("blue"); // demo changes color every second window.setInterval(function() { timer.classList.remove("blue"); timer.classList.remove("red"); const time = (new Date).getTime(); if (time % 2 == 0) { timer.classList.add("red"); } else if (time % 3 == 0) { timer.classList.add("blue"); } }, 1000); #timer-back-2 { width: 100px; height: 100px; font-size: 32px; background-image: repeating-linear-gradient(to left, yellow, yellow 5px, black 5px, black 6px); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #timer-back-2.red { background-image: repeating-linear-gradient(to left, red, red 5px, black 5px, black 6px); } #timer-back-2.blue { background-image: repeating-linear-gradient(to left, blue, blue 5px, black 5px, black 6px); } <div id="timer-back-2">Back 2</div>