如何将 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&nbsp;banner&nbsp;=&nbsp;document.getElementById('#baner');确保这是正确的：let&nbsp;banner&nbsp;=&nbsp;document.getElementById('banner');您不使用“#”，因为您已经说过它是一个 Id。文档.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.yourStyleAtributeHerelet banner = document.getElementById('baner');window.addEventListener("scroll", () => {&nbsp; &nbsp; banner.style.transform = 'translate3d(0px, ' + (-(banner.scrollTop / 5))+"px"+', 0px'});