如何将此 jquery 方法 - .text()、.height() 和 .css() 转换为普通 javascript？

Question

嗨，希望你今天过得愉快，

今天我决定在空闲时间尝试将其从 jquery 转换为 vanilla javascript，但我已经用这个代码工作了几个小时而且我真的很难过将此代码从 Jquery 转换为 vanilla javascript.

我想更改代码

$("h1").text(Math.round(progress) + "%").css({ color: textColor });    
$(".fill").height(progress + "%").css({ backgroundColor: bgColor });

完整代码：

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();

非常抱歉给您带来了麻烦希望您能帮我解决我的问题。谢谢。

Answer 1

我想这就是你需要的

document.querySelector("h1").innerText = Math.round(progress) + "%"
document.querySelector("h1").style.color = textColor
document.querySelector(".fill").style.height = progress + "%"
document.querySelector(".fill").style.backgroundColor = bgColor

小代码片段here 但是，考虑到不良做法，代码段存在多个问题。

您应该使用 class 附加 CSS（有助于 iOS）。此外，如果您想将其放在具有相同 class name/tag 名称的多个元素上，请考虑使用带有循环的 querySelectorAll。

如何将此 jquery 方法 - .text()、.height() 和 .css() 转换为普通 javascript？

How can I convert this jquery methods - .text(), .height() and .css() to vanilla javascript?

javascript

jquery

function

jquery-selectors

ecmascript-6