如何将 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。

文档.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'

});