0
215
VistasQuiero saber cómo js o css pueden saber cuándo se cambia algo como el texto en un lapso html
Estoy trabajando en un gráfico que quiero cambiar de color cuando cambia el número. No sé cómo hacer esto lamentablemente. Tal vez alguien pueda ayudarme en la dirección correcta de mirar al menos. Los números con el estilo que quiero: 20<= verde, >20 o ==30 amarillo, >30 rojo.
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Puede usar un MutationObserver para obtener información cuando algo cambia en el intervalo. o incluso mejor desde donde está cambiando el número pendiente del proyecto, debería poder activar una función para cambiar los colores.
·
Juan Pablo Isaza
Denunciar
0
Necesitará una combinación de variables JS y CSS. Esta es una de las muchas maneras de abordar esto.
const colorGreen = "#64ed7b"; const colorYellow = "#ffed13"; const colorRed = "#eb4444"; const projectCount = Number(document.querySelector(".project-count").textContent); function setColor(hex) { document.documentElement.style.setProperty('--projects', hex); } if (projectCount > 30) { setColor(colorRed); } else if (projectCount > 20) { setColor(colorYellow); } else { setColor(colorGreen); } :root { --projects: #eb4444; } .projects-pending { border: 10px solid var(--projects); color: var(--projects); width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } <div class="projects-pending"> <span class="project-count">21</span> <span>projects pending<span> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta