嗨，我希望你有美好的一天，
今天，我決定在空閑時間嘗試將其從 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();
我真的很抱歉所有的麻煩我希望你能幫助我解決我的問題。謝謝你。
uj5u.com熱心網友回復：
我認為這就是你所需要的
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
此處的小代碼片段 但是，考慮到不良做法，該片段存在多個問題。
您應該使用類附加 CSS（有助于 iOS）。此外，如果您想將此放在具有相同類名/標簽名的多個元素上，請考慮使用帶有回圈的 querySelectorAll。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/348417.html
標籤：javascript 查询 功能 ecmascript-6 jquery-选择器