如何將 jQuery css 樣式更改為 vanilla JS

Question

我在 jQuery 中有一個代碼，我需要將其轉換為純 javascript 代碼。

$(window).scroll(function () {
    $('.baner').css({'transform':'translate3d(0px, '+(-($(this).scrollTop()/5))+"px"+', 0px'});
});

我試圖做的是：

 let win = document.querySelector(window); let banner = document.getElementById('#baner'); win.addEventListener('scroll',function () { banner.css({'transform':'translate3d(0px, '+(-($(this).scrollTop()/5))+"px"+', 0px'}); });

 <div class='#baner'> </div>

如何更改 jquery css 代碼.css({'transform':'translate3d(0px, '+(-($(this).scrollTop()/5))+"px"+', 0px'}); JS？

Answer 1

let banner = document.getElementById('#baner');

確保這是正確的：

let banner = document.getElementById('banner');

您不使用“#”，因為您已經說過它是一個 ID。

document.getElementById()

Answer 2

正如 Kalinauskas 在他的回答中提到的，你可以使用 document.getElementById()。

// () => {} is ES6 shorthand for a function (also called arrow function, read about it here https://www.w3schools.com/js/js_arrow_function.asp
// Instead of the .css function for jQuery, you have .style.yourStyleAtributeHere
let banner = document.getElementById('baner');

window.addEventListener("scroll", () => {
    banner.style.transform = 'translate3d(0px, ' + (-(banner.scrollTop / 5))+"px"+', 0px'
});