hola espero que tengas un excelente dia
Hoy decidí probarlo para convertir de jquery a vanilla javascript en mi tiempo libre, pero he estado trabajando en este código durante horas y realmente estoy teniendo dificultades para convertir este código de Jquery a vanilla javascript.
Código que me gustaría cambiar
$("h1").text(Math.round(progress) + "%").css({ color: textColor }); $(".fill").height(progress + "%").css({ backgroundColor: bgColor });Código completo:
function progress() { var windowScrollTop = $(window).scrollTop(); var docHeight = $(document).height(); var windowHeight = $(window).height(); var progress = (windowScrollTop / (docHeight - windowHeight)) * 100; var bgColor = progress > 99 ? "#fff" : "#fff"; var textColor = progress > 99 ? "#fff" : "#333"; $("h1").text(Math.round(progress) + "%").css({ color: textColor }); $(".fill").height(progress + "%").css({ backgroundColor: bgColor }); } progress();Lo siento mucho por todos los problemas, espero que me puedan ayudar con mi problema. Gracias.
creo que esto es lo que necesitas
document.querySelector("h1").innerText = Math.round(progress) + "%" document.querySelector("h1").style.color = textColor document.querySelector(".fill").style.height = progress + "%" document.querySelector(".fill").style.backgroundColor = bgColorPequeño fragmento de código aquí Sin embargo, hay varios problemas con el fragmento que considera una mala práctica.
Debe agregar CSS usando una clase (ayuda con iOS). Además, si desea colocar esto en varios elementos con el mismo nombre de clase/nombre de etiqueta, considere usar querySelectorAll con un bucle dentro.